React 基础

Posted 2020-09-18 一问一答

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。

做出来以后，发现这套东西很好用，就在2013年5月开源了。

 

1 ReactDom.render()

了解react，首先要了解该方法，这是react最基本的一个方法。

用途：将虚拟组件插入真实组件root中。

import React from \'react\';
import {render} from \'react-dom\';

render(<h1>Hello, React!</h1>, document.getElementById(\'root\'));

注意：React组件必须要有闭合标签，并且是虚拟的，不是真实的DOM树，因为这种机制，用react编写复杂DOM操作的页面时比jQuer框架具有性能优势。

 

2 JSX语法

react用的是JSX语法，javascript 代码中可以写 html 代码，js代码用｛｝包含。

JSX 语法的最外层，只能有一个节点

// 错误
var myTitle = <p>Hello</p><p>World</p>;
// 正确
var myTitle = <p>Hello World</p>;

JSX 语法中可以插入 JavaScript 代码，使用大括号

var myTitle = <p>{\'Hello \' + \'World\'}</p>

 

3 Babel转码

JavaScript 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel 转码，然后才能运行。

 

4 创建组件

有两种方式创建组件

方法一（createClass方法）：

var MyTitle = React.createClass({
    getDefaultProps: function () {
        return {
            title: \'Hello getDefaultProps\'
        };
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});

 

方法二（ES6方法）：

 

5 组件的属性

import React from \'react\';
import {render} from \'react-dom\';

class MyTitle extends React.Component {
    render(){
        return <h1>hello {this.props.name}</h1>;
    }
};

render(<MyTitle name="larry"/>, document.getElementById("root"));

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 < MyTitle name="larry"> ，就是 MyTitle组件加入一个 name 属性，值为 larry。

组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

 

6 组件的状态

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? \'like\' : \'haven\\\'t liked\';
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </p>
        );
    }
});

上面代码创建了一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。

一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

 

7 组件的子节点

this.props.children 属性，表示组件的所有子节点。

class NotesList extends React.Component {
    render(){
        return (
            <ol>
                {
                    React.Children.map(this.props.children, function (child) {
                        return <li>{child}</li>;
                    })
                }
            </ol>
        );
    }
};

render(
    <NotesList>
        <span>hello</span>
        <span>world</span>
    </NotesList>,
    document.getElementById("root")
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，结果如下：

需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children的时候要小心。

我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。