React Native学习之JSX与ReactJS

Joe.Ye • 2023-02-25 • React Native

JSX

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

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

环境

ReactJS环境，如：

<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>

载入方式

内联/外联，如

var HelloMessage = React.createClass({
    render:function(){
        return <h1>Hello {this.props.name}! <br />www.appblog.cn</h1>;
    }
});

标签

  • HTML标签
  • ReactJS创建的组件类标签（首字母一定要大写）

转换（解析器）

<h3>输入</h3>
//转换成
React.createElement("h3", null, "输入");  //返回一个ReactElement对象

执行JavaScript表达式

var msg = "www.appblog.cn";
<h1>{msg}</h1>
//转换成
React.createElement("h1", null, msg);

注释

  • 单行：//
  • 多行：/*注释文本*/

属性

var msg = <h1 width="10px">www.appblog.cn</h1>
//转换成
React.createElement("h1", {width:"10px"}, "www.appblog.cn")

延展属性

使用ES6的语法

var props = {};
props.foo = "1";
props.bar = "1";
<h1 {...props} foo="2" >www.appblog.cn</h1>
//转换成
React.createElement("h1", React.__spread({}, props, {foo:"2"}), "www.appblog.cn");

自定义属性

HTML5给出的方案，凡是以data-开头的自定义属性，可渲染到页面

显示HTML

显示一段HMTL字符串，而不是html节点

借助一个属性 _html

<div>{{_html:'<h1>www.appblog.cn</h1>'}}</div>

样式的使用

style属性：外层{}按照JSX语法，内层{}是JavaScript对象

var HelloMessage = React.createClass({
    render:function(){
        return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}! <br />www.appblog.cn</h1>;
    }
});

样式的使用事件绑定

注意：onClick 调用bind方法（第一个参数是设定的作用域，第二个参数是要传递的参数）

<!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">

    function testClick(msg){
        alert(msg);
    }

    var app=<button onClick={testClick.bind(this, 'hello')} style={{
        backgroundColor:'#ff0000',
        fontSize:'28px',
        width:'200px',
        height:'50px'
    }} >点击我吧</button>

    React.render(app, document.getElementById('example'));
</script>
</body>
</html>

ReactJS

ReactJS核心思想：组件化

  • 每个组件维护自己的状态和UI，并且能够自动重新渲染
  • 多个组件组成了一个ReactJS应用

顶层API

React是全局对象

  • React.createClass：创建组件类的方法
  • React.render：渲染，将指定组件渲染到指定DOM节点

注：React.render 被 ReactDOM.render 替代

组件API

  • render：组件级API，返回组件的内部结构
  • 组件生命周期API

ReactJS组件生命周期

创建阶段

getDefaultProps：处理props的默认值，在React.createClass调用

实例化阶段

React.render 启动之后依次调用：

getInitialState、componentWillMount、render、componentDidMount

state：组件的属性，主要是用来存储组件自身需要的数据，每次数据的更新都是通过修改state属性的值，ReactJS内部会监听state属性的变化，一旦发生变化，则主动触发组件的render方法来更新虚拟DOM结构

虚拟DOM：将真实的DOM结构在内存中映射成一个JSON数据结构

更新阶段

主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。更新行为依次调用：

componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

销毁阶段

销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。调用：

componentWillUnmount

<!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}!<br />www.appblog.cn</h1>;
        },

        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 语法基础" />, document.getElementById('example'));

</script>
</body>
</html>

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/02/25/react-native-learning-jsx-and-reactjs/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
React Native学习之JSX与ReactJS
JSX React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native是ReactJS思想在Native上的体现！ JSX并不是一门新的语言，……
<<上一篇
下一篇>>
文章目录
关闭
目 录