React之JSX入门

蔚落 2022-09-21 14:28 235阅读 0赞

React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native  
是ReactJS思想在native上的体现！

JSX并不是一门新的语言，仅仅是个语法糖，允许开发者在JavaScript中书写HTML语法。，最后每个  
HTML标签都转化为JavaScript代码来运行

1.环境  
2.载入方式  
3.标签 HTML标签 与 ReactJS创建的组件类标签(首字母一定要大写)  
4.转换 解析器

### 输入 ###

转换成： React.createElement(“h3”,null,”输入”) 返回一个ReactElement对象 5.执行JavaScript表达式 var msg=”我是东方耀”;

# \{msg\} #

React.createElement(“h1”,null,msg) 6.注释 单行：// 多行：/注释文本/ 7.属性 var msg=

# 我是东方耀 #

React.createElement(“h1”,\{width:”10px”\},”我是东方耀”) 8.延展属性 使用ES6的语法 var props=\{\}; props.foo=”1”; props.bar=”1”;

### ReactJS ###

ReactJS核心思想：组件化 维护自己的状态和UI 自动重新渲染

多个组件组成了一个ReactJS应用

*  React是全局对象 顶层API与组件API
 *  React.createClass创建组件类的方法
 *  React.render渲染，将指定组件渲染到指定DOM节点
 *  render:组件级API,返回组件的内部结构
 *  React.render被ReactDOM.render替代

**ReactJS组件生命周期**

1.创建阶段  
getDefaultProps：处理props的默认值 在React.createClass调用  
2.实例化阶段  
React.render(

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React组件的生命周期</title>
        <script type="text/javascript" src="react.js"></script>
        <script type="text/javascript" src="react-dom.js"></script>
        <script type="text/javascript" src="browser.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage=React.createClass(
                {
                    //1、创建阶段
                    getDefaultProps:function(){
         
                      //在创建类的时候被调用   this.props该组件的默认属性
                        console.log("getDefaultProps");
                        return {};
                    },
    
                    //2、实例化阶段
                    getInitialState:function(){
         
                        //初始化组件的state值，其返回值会赋值给组件的this.state属性
                      //获取this.state的默认值
                        console.log("getInitialState");
                        return {};
                    },
    
                    componentWillMount:function(){
         
                      //在render之前调用此方法
                        //业务逻辑的处理都应该放在这里，如对state的操作等
                        console.log("componentWillMount");
                    },
    
    
    
                    render:function(){
         
                        //根据state值，渲染并返回一个虚拟DOM
                        console.log("render");
                        return <h1 style={
           {color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;
                        //这是注释  React.createElement
                    },
    
                    componentDidMount:function(){
         
                      //该方便发生在render方法之后
                        //在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
                        //组件内部可以通过this.getDOMNode()来获取当前组件的节点
                        console.log("componentDidMount");
                    },
    
             //3、更新阶段，主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整
    
    
                 componentWillReceiveProps:function(){
         
                     //该方法发生在this.props被修改或父组件调用setProps()方法之后
                     //调用this.setState方法来完成对state的修改
                     console.log("componentWillRecieveProps");
                 },
        shouldComponentUpdate:function() {
         
            //用来拦截新的props或state，根据逻辑来判断
            //是否需要更新
            console.log("shouldComponentUpdate");
    
            return true;
        },
    
            componentWillUpdate:function(){
         
                //shouldComponentUpdate返回true的时候执行
                //组件将更新
                console.log("componentWillUpdate");
    
            },
    
              componentDidUpdate:function(){
         
                  //组件更新完毕，我们常在这里做一些DOM操作
                  console.log("componentDidUpdate");
              },
    
        //4、销毁阶段
               componentWillUnmount:function(){
         
                   //销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作
                   console.log("componentWillUnmount");
               }
    
                }
        );
    
        ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));
    
    
    
    
    </script>
    </body>
    </html>

**组件之间通信实例**

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React组件通信</title>
        <script type="text/javascript" src="react.js"></script>
        <script type="text/javascript" src="react-dom.js"></script>
        <script type="text/javascript" src="browser.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    <script type="text/babel">
        var Parent=React.createClass(
                {
                    click:function(){
         
                        this.refs.child.getDOMNode().style.color="red";
                    },
                    render:function(){
         
                        return (
                                <div onClick={this.click} >Parent is :
                                <Child name={this.props.name}  ref="child"></Child>
                </div>
    
                        );
    
                    }
                }
        );
    
        var Child=React.createClass({
    
            render:function(){
                return <span> {this.props.name} </span>;
            }
    
        });
    
        ReactDOM.render(<Parent name="React语法基础" /> ,document.getElementById('example'));
    
    
    
    
    </script>
    </body>
    </html>

### React Native实战之调试与打包发布 ###

[http://localhost:8081/index.android.bundle?platform=android][http_localhost_8081_index.android.bundle_platform_android]；当应用启动运行的时候，会自动拉取这  
个bundle文件，该文件里存放的是应用的全部逻辑代码，在目录中并不存在这个文件，事实上，这个  
地址只是一个请求地址，而非真正的静态资源文件，是通过包服务器packager通过动态分析  
index.android.js中的依赖，并对其进行合并得到的，而且该服务允许代码实时渲染。

1.生成一个签名密钥  
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

最后它会生成一个叫做my-release-key.keystore的密钥库文件

2.找到路径/android/app/src/main，并在该目录下新建assets文件夹

3.在工程目录下将index.android.bundle下载并保存到assets资源文件夹中  
curl -k “[http://localhost:8081/index.android.bundle][http_localhost_8081_index.android.bundle]” > android/app/src/main/assets/index.android.bundle

这句命令是重点，如果assets目录中不存在该文件，则打包的apk在执行时显示空白。

Protocol ‘http not supported or disabled in libcurl  
Windows下安装使用curl命令:[http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html][http_jingyan.baidu.com_article_a681b0dec4c67a3b1943467c.html]

4.添加gradle的android keystore配置  
打包的apk在未签名的情况下,在手机中（非root）是不允许安装的  
在build.gradle文件中

//签名
    signingConfigs{ release { storeFile file("/my-release-key.keystore") storePassword "密码" keyAlias "keyAlias的名字" keyPassword "密码" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release //添加这句话引用签名配置 } }

5.启用Proguard代码混淆来缩小APK文件的大小

Proguard是一个Java字节码混淆压缩工具，它可以移除掉React Native Java（和它的依赖库中）中没  
有被使用到的部分，最终有效的减少APK的大小。  
重要：启用Proguard之后，你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原  
生库做一些额外的配置。参见app/proguard-rules.pro文件。

def enableProguardInReleaseBuilds = true

6.在/android/目录中执行gradle assembleRelease命令，打包后的文件在  
android/app/build/outputs/apk目录中，例如app-release.apk。如果打包碰到问题可以先执行 gradle  
clean 清理一下。

安装gradle工具（版本与android\\gradle\\wrapper下的一致），并配置环境变量，配置GRADLEHOME  
到你的gradle根目录当中，然后把%GRADLEHOME%/bin（linux或mac的是$GRADLE\_HOME/bin）加  
到PATH的环境变量。

配置完成之后，运行gradle -v，检查一下是否安装无误

7.将apk发布到各大应用市场（BUILD SUCCESSFUL）

[http_localhost_8081_index.android.bundle_platform_android]: http://localhost:8081/index.android.bundle?platform=android
[http_localhost_8081_index.android.bundle]: http://localhost:8081/index.android.bundle
[http_jingyan.baidu.com_article_a681b0dec4c67a3b1943467c.html]: http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html