# react 基础

# react 介绍

什么是 react ？

一个用于构建用户界面的库。React 主要用于构建用户界面，相当于 MVC 中的 V（视图）。

React 来源于 facebook 内部项目，因为该公司对当时市场上的所有的 js mvc 框架不满意，所以决定自己写一个，用来构建 Instagram 网站。

# react 特点

声明式设计：前端的 vm 和 v 绑定在一起，vm 一变化，v 自动发生变化。
高效：主要是区别于最早的 jquery，不用手动去修改节点。
JSX ：在 vue 中，通过 template（模板）来描述我们的视图长什么样子。在react中，是通过 JSX 来描述视图长什么样子。JSX返回的是虚拟DOM。
虚拟 DOM：在react 修改视图不会直接去操作DOM，而是首先修改虚拟DOM，所谓虚拟DOM，就是指使用js对象来描述DOM节点的结构。
单向数据流： state（驱动应用的数据源）、view（视图）、actions（用户的操作）

在 react 中，首先用户可以操作视图，操作视图后，会导致数据状态的改变，数据状态一改变，视图又重新发生改变，给用户呈现出新的视图。

Diff 算法：在虚拟dom中，会用 js 对象来表示dom树的结构，然后用虚拟dom生成真实dom，插入到文档。当数据发生变化时，重新生成一颗新的虚拟dom树，通过 diff 算法比较两颗树的差异。最终把变化的部分重新渲染到dom树中。

# 安装 react

作为基础语法学习，我们先不上脚手架，通过 cdn 来引入 react。

<!-- 引入 React 核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 提供与 DOM 相关的功能 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

1
2
3
4
5
6

react.js：react 核心库。
react-dom.js：提供与 DOM 操作相关的功能。
babel.js ：负责将 JSX 进行解析。

快速入门示例如下：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello World</h1>
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# react 元素

在上面的示例中，我们使用 JSX 的东西来描述我们的视图。

JSX 是一种 `javascript 语法扩展，也就是说，看着像是 html，但是其实是 js 对象。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const ele = (
            <div>
                <p>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
            </div>

        );
        ReactDOM.render(
            ele
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# JSX 中的细节

JSX 根元素只能有一个，这一点和 vue2.0 的模板语法是一样。
在 JSX 中，可以书写简单的 js 表达式

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const ele = (
            <div>
                <p>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

不能使用语句，只能是表达式。

样式

在 react 中推荐使用内联样式，下面是示例：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const myStyle = {
            fontSize : 42,
            color : 'red'
        };
        const ele = (
            <div>
                <p style={myStyle}>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

使用类样式的时候，由于 JSX 是 JS 对象，所以不能书写 class，必须写成 className。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myStyle{
            font-size: 42px;
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const ele = (
            <div>
                <p className='myStyle'>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注释

如果要在 JSX 中书写注释，注释格式为 {/*注释内容*/}

const ele = (
            <div>
                {/*这是一个注释*/}
                <p className='myStyle'>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );

1
2
3
4
5
6
7
8
9
10
11
12

数组

在 React 中，允许渲染存放多个JSX 的数组。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const arr = [<h1>world</h1>,<p>react</p>];
        ReactDOM.render(
            arr
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# createElement

JSX 其实只是一个语法糖，他的背后，其实是通过 createElement 的函数创建的 js 对象。

React.createElement(type,[props],[...children])

type: 要创建的元素类型
props：元素属性
children：子元素

const ele = (
	<h1 className='world'>Hello</h1>
);

1
2
3

等价于下面的的代码：

const ele = React.createElement('h1',{className:'world'},'Hello');

之所以 react 要给我们提供 JSX，原因在于简化我们的书写。

如果没有 JSX，那么我们书写代码，就需要向下面这样书写：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const h1 = React.createElement('h1',null,'欢迎学习 react');
        const p = React.createElement('p',null,'在 JSX 中描述视图');
        const li1 = React.createElement('li',null,'苹果');
        const li2 = React.createElement('li',null,'香蕉');
        const li3 = React.createElement('li',null,'梨子');
        const ul = React.createElement('ul',null,li1,li2,li3);
        const ele = React.createElement('div',null,h1,p,ul);
        ReactDOM.render(
            ele
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 组件

# 创建组件

在 react 中，组件分为两种：函数式组件和类组件。

函数式组件

在 react 中，区分组件和函数的方式很简单，组件名为大写，第二个就是要返回一段 JSX。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com(){
            // 如果是组件，一定会有返回值，并且是返回一段 JSX
            return (
                <div>
                    <h1>欢迎学习 react</h1>
                </div>
            );
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 类组件

顾名思义就是通过类来书写一个组件。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            render(){
                return (
                    <h1>world</h1>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 组件的组合使用

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com1 extends React.Component{
            render(){
                return (
                    <h1>组件1</h1>
                )
            }
        }
        class Com2 extends React.Component{
            render(){
                return (
                    <h1>组件2</h1>
                )
            }
        }
        class Com extends React.Component{
            render(){
                return(
                    <div>
                        <Com1/>
                        <Com2/>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Fragment

在 React 15 版本之前，return 的 JSX 必须只能有一个根节点。这样就会有一个问题，外层的 div 其实是没有意义的

所以从 React 15 版本之后，提供了 Fragment 的写法

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com1 extends React.Component{
            render(){
                return (
                    <h1>组件1</h1>
                )
            }
        }
        class Com2 extends React.Component{
            render(){
                return (
                    <h1>组件2</h1>
                )
            }
        }
        class Com extends React.Component{
            render(){
                return(
                    <React.Fragment>
                        <Com1/>
                        <Com2/>
                    </React.Fragment>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Props

接下来，我们就来看一下如何往组件里面传递参数。

函数式组件

直接通过函数的形参传递过去

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com(props){
            return(
                    <div>{props.name}</div>
                )
        }
        ReactDOM.render(
            <Com name='world999' />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

类组件

通过 constructor 的props来接收

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                    <div>{this.props.name}</div>
                )
            }
        }
        ReactDOM.render(
            <Com name='world' />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# defaultprops

默认参数，就好比函数设置默认值一样，如果没有向组件传递参数，那么使用默认值。

# 函数组件

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com(props){
            return(
                    <div>
                        <p>name {props.name}</p>
                        <p>age {props.age}</p>
                    </div>
                )
        }
        Com.defaultProps = {
            name : 'william',
            age : 19
        }
        ReactDOM.render(
            <Com age={20} />
            ,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 类组件设置默认参数

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            constructor(props){
                super(props)
            }
            static defaultProps = {
                name : 'william',
                age : 18
            }
            render(){
                return(
                    <div>
                    <div>{this.props.name}</div>
                    <div>{this.props.age}</div>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com age={20} />
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 插槽

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            render(){
                return(
                    <div>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 事件处理

如何绑定事件
this 的指向
向事件处理程序传参

首先，绑定事件是绑定在具体的 JSX 里面的元素中

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log('点击事件！！！');
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

函数组件的绑定方法如下：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com(){
            function eventHandle(){
                console.log('eventHandle~~~');
            }
            return(
                    <div>
                        <p onClick={eventHandle}>world</p>
                    </div>
                )
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

接下来，我们来讨论一下 this 的指向问题。注意，this 的指向问题只存在于类组件中，也就是说，类组件存在注意 this 的问题。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在上面的代码中，我们可以看到，在类组件的事件处理函数中，我们无法通过 this 拿到当前的组件，拿到的是一个 undefined。

下面介绍 3 种解决该问题的方案。

将事件处理函数修改为箭头函数

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle = ()=>{
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

通过 bind 来绑定 this 指向

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
             constructor(){
                 super();
                 this.eventHandle = this.eventHandle.bind(this);
             }
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在绑定事件的时候，通过箭头函数来绑定

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={()=>this.eventHandle()}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 向事件处理程序传递参数

通过 bind 方法在绑定 this 指向时向事件处理函数传参

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle=(name,e)=>{
                console.log(name);
                console.log(e);
            }
            render(){
                return(
                    <div onClick={this.eventHandle.bind(this,'world')}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在通过 bind 来绑定的时候，事件处理函数会接收两个参数，第一个是传递过来的参数，第二个是事件对象。

通过箭头函数的形式来传递参数

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
            eventHandle=(name,e)=>{
                console.log(name);
                console.log(e);
            }
            render(){
                return(
                    <div onClick={(e)=>this.eventHandle('world',e)}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# state

在组件内部所维护的状态。

在 react 中，只有类组件才能设置 state。

所以，在以前，类组件又被称之为有状态组件，而函数组件被称之为无状态组件。

快速入门示例：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
         class Com extends React.Component{
             constructor(){
                 super();
                 this.state = {
                     name : 'shasha',
                     age : 18,
                     gender : 'female'
                 }
             }
            render(){
                return(
                    <div>
                       <p>{this.state.name}</p>
                       <p>{this.state.age}</p>
                       <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            ,document.getElementById('app'));
    
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在react中，为 state 提供了一种简写的形式：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                name: 'qingqing',
                age: 18,
                gender: 'female'
            }
            render() {
                return (
                    <div>
                        <p>{this.state.name}</p>
                        <p>{this.state.age}</p>
                        <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

如何来改变组件里面的状态。

在 vue 中，我们要修改组件内部的data 属性，直接 this.属性名赋值即可。

但是在 react 中，需要用到一个方法来修改，setState 方法

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                name: 'qingqing',
                age: 18,
                gender: 'female'
            }
            eventHandle = ()=>{
                this.setState({
                    name : 'shasha',
                    age : 19                  
                })
            }
            render() {
                return (
                    <div>
                        <button onClick={this.eventHandle}>click</button>
                        <p>{this.state.name}</p>
                        <p>{this.state.age}</p>
                        <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

大家还容易犯的一个错误，在修改了 state 之后，想要立即获取新的 state 的值。

这个时候是获取不了，原因很简单，也是异步在修改数据。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                name: 'qingqing',
                age: 18,
                gender: 'female'
            }
            eventHandle = ()=>{
                this.setState({
                    name : 'shasha',
                    age : 19
                })
                console.log(this.state.name);
            }
            render() {
                return (
                    <div>
                        <button onClick={this.eventHandle}>click</button>
                        <p>{this.state.name}</p>
                        <p>{this.state.age}</p>
                        <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

这个时候，setState 接收第二个参数，第二个参数是一个回调函数，可以在回调函数中，获取到最新的值。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                name: 'qingqing',
                age: 18,
                gender: 'female'
            }
            eventHandle = ()=>{
                this.setState({
                    name : 'shasha',
                    age : 19
                },()=>{
                    console.log(this.state.name);
                })
            }
            render() {
                return (
                    <div>
                        <button onClick={this.eventHandle}>click</button>
                        <p>{this.state.name}</p>
                        <p>{this.state.age}</p>
                        <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 条件渲染

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com1(){
            return (
                <h1>编程真好玩</h1>
            )
        }
        function Com2(){
            return (
                <h1>react 真有趣</h1>
            )
        }
        class Com extends React.Component{
            state = {
                whichCom : true
            }
            changeHandle = ()=>{
                this.setState({
                    whichCom : !this.state.whichCom
                })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.changeHandle}>change</button>
                        <div>{this.state.whichCom ? <Com1/> : <Com2/>}</div>
                    </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

如果想要不渲染某一个组件，直接返回 null。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        function Com1(){
            return (
                <h1>编程真好玩</h1>
            )
        }
        function Com2(){
            return null;
        }
        class Com extends React.Component{
            state = {
                whichCom : true
            }
            changeHandle = ()=>{
                this.setState({
                    whichCom : !this.state.whichCom
                })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.changeHandle}>change</button>
                        <div>{this.state.whichCom ? <Com1/> : <Com2/>}</div>
                    </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 列表渲染

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            state = {
                data : ['vue','react','angular','jquery']
            }
            render(){
                let lis = this.state.data.map((item,index)=>{
                    return (<li key={index}>{item}</li>)
                })
                return (
                    <div>
                        <div>
                            <ul>{lis}</ul>
                        </div>
                    </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

课堂练习：渲染表格

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        
        class Com extends React.Component{
            state = {
                data : [
                    {id : 1,name : 'william',age : 18,gender : '男'},
                    {id : 2,name : 'qingqing',age : 17,gender : '女'},
                    {id : 3,name : 'shasha',age : 19,gender : '女'},
                    {id : 4,name : 'chenqian',age : 18,gender : '男'},
                    {id : 5,name : 'laopan',age : 20,gender : '男'}
                ]
            }
            render(){
                let trs = this.state.data.map((item,index)=>{
                    return (<tr key={index}>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.age}</td>
                            <td>{item.gender}</td>
                        </tr>)
                })
                return (
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                </tr>
                            </thead>
                            <tbody>{trs}</tbody>
                        </table>
                    </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 受控组件与非受控组件（表单）

回忆 vue，通过 data 去控制表单控件里面的值。通过 v-model 来双向绑定。

在 react，我们也想做相同的事情，把 state 和表单控件绑定在一起。

所谓受控，就是指表单的控件和 state进行了绑定。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        
        class Com extends React.Component{
            state = {
                content : ''
            }
            changeHandle = (e)=>{
                this.setState({
                    content : e.target.value
                })
            }
            render(){
                return (
                    <div>
                        <input type="text" name="" id="" value={this.state.content} onChange={this.changeHandle}/>
                        <p>你输入的是：{this.state.content}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

受控组件的优点？

最大的优点就是我们能够通过 state 来控制用户的输入。

受控组件的实际应用

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        
        class Com extends React.Component{
            state = {
                value1 : '',
                value2 : ''
            }
            changeHandle = (e)=>{
                if(e.target.name == 'one'){
                    this.setState({
                        value1 : e.target.value.toUpperCase()
                    })
                } else {
                    this.setState({
                        value2 : e.target.value.split('').map(item=>{
                            if(!isNaN(item)){
                                return item
                            }
                        }).join('')
                    })
                }
            }
            
            render(){
                return (
                    <div>
                        <div><input type="text" name="one" id="" value={this.state.value1} onChange={this.changeHandle}/></div>
                        <p>第一个输入框的值为：{this.state.value1}</p>
                        <div><input type="text" name="two" id="" value={this.state.value2} onChange={this.changeHandle}/></div>
                        <p>第一个输入框的值为：{this.state.value2}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById('app'));

    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# value 值

在 html 中，部分输入控件比较特殊，例如 textarea ，通过标签之间的文本节点来获取用户输入的值。

在 react 中，可以通过统一设置成受控组件，从而对 value 来进行控制。

（1）textarea

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            state = {
                value : '这是文本域默认值'
            }
            submitHandle = (e)=>{
                alert(`文本框的内容为：${this.state.value}`);
                e.preventDefault();
            }
            changeHandle = (e)=>{
                this.setState({
                    value : e.target.value
                })
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <textarea name="" id="" cols="30" rows="10" value={this.state.value} onChange={this.changeHandle}></textarea>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(2) 下拉列表

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            state = {
                value : '成都'
            }
            submitHandle = (e)=>{
                alert(`你选择的城市为：${this.state.value}`);
                e.preventDefault();
            }
            changeHandle = (e)=>{
                this.setState({
                    value : e.target.value
                })
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <label for="">请选择你所在的城市：</label>
                        <div>
                            <select name="" id="" value={this.state.value} onChange={this.changeHandle}>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="成都">成都</option>
                            </select>
                        </div>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

(3) 单选按钮

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            state = {
                value : '女'
            }
            submitHandle = (e)=>{
                alert(`你选择的城市为：${this.state.value}`);
                e.preventDefault();
            }
            changeHandle = (e)=>{
                this.setState({
                    value : e.target.value
                })
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <label for="">请选择性别：</label>
                        <div>
                            <input type="radio" name="gender" id="" value="男" onChange={this.changeHandle}/>
                            <input type="radio" name="gender" id="" value="女" defaultChecked onChange={this.changeHandle}/>
                            <input type="radio" name="gender" id="" value="保密" onChange={this.changeHandle}/>
                        </div>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

（4）多选框示例

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            state = {
                value : []
            }
            submitHandle = (e)=>{
                alert(`你选择的爱好有：${this.state.value}`)
                e.preventDefault();
                
            }
            changeHandle = (e)=>{
                let item = e.target.value;
                let items = [...this.state.value];
                let index = items.indexOf(item); // 获取当前选择的下标
                index === -1 ? items.push(item) : items.splice(index,1);
                this.setState({
                    value : items
                })
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <label for="">请选择你的爱好：</label>
                        <div>
                            <input type="checkbox" name="hobby" id="" value="玩游戏" onChange={this.changeHandle}/>
                            <input type="checkbox" name="hobby" id="" value="写代码" onChange={this.changeHandle}/>
                            <input type="checkbox" name="hobby" id="" value="看电影" onChange={this.changeHandle}/>
                        </div>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 非受控组件

故名思义，受控是表单组件和state绑定在一起，那么非受控就是控件和state没有绑定在一起。

这个时候，react 也提供了一个东西叫做 ref

（1）通过 React.createRef 来创建一个 ref

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(){
                super();
                this.nameInput = React.createRef(); // 创建了一个 ref
            }
            submitHandle = (e)=>{
                e.preventDefault();   
                console.log(this.nameInput);
                console.log(this.nameInput.current);
                console.log(this.nameInput.current.value);
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <input type="text" name="" id="" ref={this.nameInput}/>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

（2）通过 refs 来创建引用，然后通过 this.refs 来获取 DOM 元素（和 vue 的$refs）

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(){
                super();
            }
            submitHandle = (e)=>{
                e.preventDefault();   
                console.log(this.refs.nameInput);
                console.log(this.refs.nameInput.value);
            }
            render() {
                return (
                    <form onSubmit={this.submitHandle}>
                        <input type="text" name="" id="" ref='nameInput'/>
                        <button>提交</button>
                    </form>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 状态提升

所谓状态提升，就是指在父组件中设置一个方法（函数），通过 props 的形式将函数名传递给子组件，然后在子组件中更新 state 的状态，并且调用父组件传递过来的函数名，将 state 作为参数传递给父组件。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com1 extends React.Component{
            cbHandle(item){
                console.log(item);
            }
            render(){
                return (
                    <div>
                        <h1>这是父组件</h1>
                        <Com2 cb={this.cbHandle}/>
                    </div>
                   
                );
            }
        }
        class Com2 extends React.Component{
            state = {
                value : '这是 world999'
            }
            clickHandle = ()=>{
                this.props.cb(this.state.value)
            }
            render(){
                return (
                    <div>
                        <div>这是子组件</div>
                        <button onClick={this.clickHandle}>触发父组件的事件，并且把子组件的值传递给父组件</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<Com1/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 生命周期

react 中提供的生命周期钩子函数

render

render 方法是 class 组件中唯一一个必须实现的方法。

当render 方法被调用的时候，内存中的节点就会全部渲染出来。

constructor

在将组件挂载到 DOM 之前会调用 constructor。

通常在constructor中初始化state和绑定事件处理方法的this

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(){
                super();
                console.log('constructor');
            }
            render(){
                console.log('render');
                return (
                    <div>test</div>
                   
                );
            }
        }
        
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

componentDidMount

在调用 render 后，组件就被挂载在 DOM 节点上面了，然后这个时候会调用 componentDidMount 方法。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(){
                super();
                console.log('constructor');
            }
            componentDidMount(){
                console.log('componentDidMount');
            }
            render(){
                console.log('render');
                return (
                    <div>test</div>
                   
                );
            }
        }
        
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

componentDidUpdate

当改变视图的时候，会重新调用 render 方法来渲染新的视图，这个componentDidUpdate就是在render方法调用完毕之后调用。

componentDidUpdate(newProps,newState)
// newProps 更新后的 props，newState 更新后的 state

1
2

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(){
                super();
                this.state = {
                    count : 0
                }
                console.log('constructor');
            }
            componentDidMount(){
                console.log('componentDidMount');
            }
            componentDidUpdate(preProps,preState){
                console.log(preProps,preState);
            }
            clickHandle = ()=>{
                this.setState({
                    count : ++this.state.count
                })
            }
            render(){
                console.log('render');
                return (
                    <div>
                        <p>{this.state.count}</p>
                        <button onClick={this.clickHandle}>+1</button>
                    </div>
                   
                );
            }
        }
        
        ReactDOM.render(<Com/>,document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

componentWillUnmount

在这个组件卸载之前调用，一般会在这个钩子函数里面做一些清理工作，比如这个组件有计时器，那么在组件销毁的时候，应该将计时器清除掉。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            constructor() {
                super();
                this.state = {
                    isShow: true
                }
                console.log('constructor');
            }
            componentDidMount() {
                console.log('componentDidMount');
            }
            componentDidUpdate(preProps, preState) {
                console.log(preProps, preState);
            }
            clickHandle = () => {
                this.setState({
                    count: ++this.state.count
                })
            }
            changeCom = () => {
                this.setState({
                    isShow: !this.state.isShow
                })
            }
            render() {
                console.log('render');
                return (
                    <div>
                        <button onClick={this.changeCom}>切换</button>
                        <div>
                            {this.state.isShow ? <Com2 /> : null}
                        </div>
                    </div>

                );
            }
        }
        class Com2 extends React.Component {
            componentWillUnmount(){
                console.log('子组件即将被销毁');
            }
            render() {
                return <h1>子组件</h1>
            }
        }
        ReactDOM.render(<Com />, document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 纯组件

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                value : 0
            }
            changeCom= ()=>{
                this.setState({
                    value : 0
                })
            }
            render() {
                console.log('render 被触发');
                return (
                    <div>
                        <button onClick={this.changeCom}>+1</button>
                        <div>{this.state.value}</div>
                    </div>

                );
            }
        }
        
        ReactDOM.render(<Com />, document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在上面的例子中，我们可以看到，state 并没有发生变化，但是由于调用了 setState，所以每一次都会触发 render 方法。

所以这里就会有性能上面的问题。

# shouldComponentUpdate

该方法有一个返回值，返回一个布尔值。

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.Component {
            state = {
                value : 0
            }
            changeCom= ()=>{
                this.setState({
                    value : ++this.state.value
                })
            }
            shouldComponentUpdate(nextProps,nextState){
                if(this.state.value == nextState.value){
                    return false;
                }
                return true;
            }
            render() {
                console.log('render 被触发');
                return (
                    <div>
                        <button onClick={this.changeCom}>+1</button>
                        <div>{this.state.value}</div>
                    </div>

                );
            }
        }
        
        ReactDOM.render(<Com />, document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

从 react 新版本开始，提供了一个纯组件的概念，可以简化上面的操作。

示例代码如下：

<body>
    <div id="app"></div>
    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class Com extends React.PureComponent {
            state = {
                value : 0
            }
            changeCom= ()=>{
                this.setState({
                    value : this.state.value
                })
            }
            render() {
                console.log('render 被触发');
                return (
                    <div>
                        <button onClick={this.changeCom}>+1</button>
                        <div>{this.state.value}</div>
                    </div>

                );
            }
        }
        
        ReactDOM.render(<Com />, document.getElementById('app'));
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

William's blog

React 快速入门

React 快速入门

# react 基础

# react 介绍

# react 特点

# 安装 react

# react 元素

# JSX 中的细节

# createElement

# 组件

# 创建组件

# 类组件

# 组件的组合使用

# Fragment

# Props

# defaultprops

# 函数组件

# 类组件设置默认参数

# 插槽

# 事件处理

# 向事件处理程序传递参数

# state

# 条件渲染

# 列表渲染

# 受控组件与非受控组件（表单）

# value 值

# 非受控组件

# 状态提升

# 生命周期

# 纯组件

# shouldComponentUpdate