〇、说明

《千锋 HTML5 好程序员第三阶段 React》学习材料——古艺散人

一、create-react-app

全局安装 create-react-app

$ npm install -g create-react-app

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢，
Installing react, react-dom, and react-scripts...

如果不想全局安装，可以直接使用 npx

$ npx create-react-app your-app 也可以实现相同的效果

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react 的顶级库
• react-dom: 因为 react 有很多的运行环境，比如 app 端的 react-native, 我们要在 web 上运行就使用 react-dom
• react-scripts: 包含运行和打包 react 应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。

生成项目的目录结构如下：

├── README.md                           使用方法的文档
├── node_modules                    所有的依赖安装的目录
├── package-lock.json           锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public                              静态公共目录
└── src                                     开发用的源代码目录

常见问题：

• npm 安装失败
  • 切换为 npm 镜像为淘宝镜像
  • 使用 yarn，如果本来使用 yarn 还要失败，还得把 yarn 的源切换到国内
  • 如果还没有办法解决，请删除 node_modules 及 package-lock.json 然后重新执行npm install命令
  • 再不能解决就删除 node_modules 及 package-lock.json 的同时清除 npm 缓存npm cache clean --force之后再执行npm install命令

二、关于 React

1、React 的起源和发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。

2、React 与传统 MVC 的关系

轻量级的视图层库！A JavaScript library for building user interfaces

React 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

3、React 高性能的体现：虚拟 DOM

React 高性能的原理：

在 Web 开发中我们总需要将变化的数据实时反应到 UI 上，这时就需要对 DOM 进行操作。而复杂或频繁的 DOM 操作通常是性能瓶颈产生的原因（如何进行高性能的复杂 DOM 操作通常是衡量一个前端开发人员技能的重要指标）。

React 为此引入了虚拟 DOM（Virtual DOM）的机制：在浏览器端用 Javascript 实现了一套 DOM API。基于 React 进行开发时所有的 DOM 构造都是通过虚拟 DOM 进行，每当数据变化时，React 都会重新构建整个 DOM 树，然后 React 将当前整个 DOM 树和上一次的 DOM 树进行对比，得到 DOM 结构的区别，然后仅仅将需要变化的部分进行实际的浏览器 DOM 更新。而且 React 能够批处理虚拟 DOM 的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从 A-B, B-A，React 会认为 A 变成 B，然后又从 B 变成 A UI 不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。

尽管每一次都需要构造完整的虚拟 DOM 树，但是因为虚拟 DOM 是内存数据，性能是极高的，而对实际 DOM 进行操作的仅仅是 Diff 分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的 DOM 元素，而只需要关心在任意一个数据状态下，整个界面是如何 Render 的。

React Fiber:

在 react 16 之后发布的一种 react 核心算法，React Fiber 是对核心算法的一次重新实现(官网说法)。之前用的是 diff 算法。

在之前 React 中，更新过程是同步的，这可能会导致性能问题。

当 React 决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对 Virtual DOM，最后更新 DOM 树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为 JavaScript 单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。

React Fiber 的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

4、React 的特点和优势

(1) 虚拟 DOM

我们以前操作 dom 的方式是通过 document.getElementById()的方式，这样的过程实际上是先去读取 html 的 dom 结构，将结构转换成变量，再进行操作。而 reactjs 定义了一套变量形式的 dom 模型，一切操作和换算直接在变量中，这样减少了操作真实 dom，性能真实相当的高，和主流 MVC 框架有本质的区别，并不和 dom 打交道

(2) 组件系统

react 最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component

那么什么是组件呢？

组件指的就是同时包含了 html、css、js、image 元素的聚合体

使用 react 开发的核心就是将页面拆分成若干个组件，并且 react 一个组件中同时耦合了 css、js、image，这种模式整个颠覆了过去的传统的方式

(3) 单向数据流

其实 reactjs 的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

(4) JSX 语法

在 vue 中，我们使用 render 函数来构建组件的 dom 结构性能较高，因为省去了查找和编译模板的过程，但是在 render 中利用 createElement 创建结构的时候代码可读性较低，较为复杂，此时可以利用 jsx 语法来在 render 中创建 dom，解决这个问题，但是前提是需要使用工具来编译 jsx

三、编写第一个 react 应用程序

react 开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app 里已经帮我们把这些东西都安装好了。把通过 CRA 创建的工程目录下的 src 目录清空，然后在里面重新创建一个 index.js. 写入以下代码:

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from "react";
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from "react-dom";

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
    // 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
    <h1>欢迎进入React的世界</h1>,
    // 渲染到哪里
    document.getElementById("root")
);

四、元素与组件

如果代码多了之后，不可能一直在 render 方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样：

import React from "react";
import ReactDOM from "react-dom";
// 这里感觉又不习惯了？这是在用JSX定义一下react元素
const app = <h1>欢迎进入React的世界</h1>;
ReactDOM.render(app, document.getElementById("root"));

1、函数式组件

由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去 return 一个元素:

import React from "react";
import ReactDOM from "react-dom";

// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = props => <h1>欢迎进入{props.name}的世界</h1>;

ReactDOM.render(
    app({
        name: "react",
    }),
    document.getElementById("root")
);

这里我们定义的方法实际上也是 react 定义组件的第一种方式-定义函数式组件，这也是无状态组件。但是这种写法不符合 react 的 jsx 的风格，更好的方式是使用以下方式进行改造

import React from "react";
import ReactDOM from "react-dom";

const App = props => <h1>欢迎进入{props.name}的世界</h1>;

ReactDOM.render(
    // React组件的调用方式
    <App name="react" />,
    document.getElementById("root")
);

这样一个完整的函数式组件就定义好了。但要注意！注意！注意！组件名必须大写，否则报错。

2、class 组件

ES6 的加入让 JavaScript 直接支持使用 class 来定义一个类，react 的第二种创建组件的方式就是使用的类的继承，ES6 class是目前官方推荐的使用方式，它使用了 ES6 标准语法来构建，看以下代码：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
    render() {
        return (
            // 注意这里得用this.props.name, 必须用this.props
            <h1>欢迎进入{this.props.name}的世界</h1>
        );
    }
}
ReactDOM.render(<App name="react" />, document.getElementById("root"));

运行结果和之前完全一样，因为 JS 里没有真正的 class，这个 class 只是一个语法糖, 但二者的运行机制底层运行机制不一样。

• 函数式组件是直接调用, 在前面的代码里已经有看到

• es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：

  import React from "react";
  import ReactDOM from "react-dom";
  
  class App extends React.Component {
      render() {
          return 
  欢迎进入{this.props.name}的世界
  ;
      }
  }
  
  const app = new App({
      name: "react",
  }).render();
  
  ReactDOM.render(app, document.getElementById("root"));

3、更老的一种方法

在 16 以前的版本还支持这样创建组件, 但现在的项目基本上不用

var createReactClass = require("create-react-class");
var Greeting = createReactClass({
    render: function () {
        return <h1>Hello, {this.props.name}</h1>;
    },
});

4、组件的组合、嵌套

将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖

组件嵌套的方式就是将子组件写入到父组件的模板中去，且 react 没有 Vue 中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
    render() {
        return <h1>欢迎进入React的世界</h1>;
    }
}
class Content extends Component {
    render() {
        return <p>React.js是一个构建UI的库</p>;
    }
}
/** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom
class App extends Component {
  render () {
    return (
        <div>
            <Title />
        <Content />
      </div>
    )
  }
}
**/
// 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
class App extends Component {
    render() {
        return (
            <Fragment>
                <Title />
                <Content />
            </Fragment>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

五、JSX 原理

要明白 JSX 的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?

看下面的 DOM 结构

<div class="app" id="appRoot">
    <h1 class="title">欢迎进入React的世界</h1>
    <p>React.js 是一个帮助你构建页面 UI 的库</p>
</div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

下面代码:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
    render() {
        return (
            <div className="app" id="appRoot">
                <h1 className="title">欢迎进入React的世界</h1>
                <p>React.js 是一个构建页面 UI 的库</p>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

编译之后将得到这样的代码:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
    render() {
        return React.createElement(
            "div",
            {
                className: "app",
                id: "appRoot",
            },
            React.createElement("h1", { className: "title" }, "欢迎进入React的世界"),
            React.createElement("p", null, "React.js 是一个构建页面 UI 的库")
        );
    }
}

ReactDOM.render(React.createElement(App), document.getElementById("root"));

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等, 语法为

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

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

JSX —使用 react 构造组件，bable 进行编译—> JavaScript 对象 — ReactDOM.render()—>DOM 元素 —>插入页面

六、组件中 DOM 样式

• 行内样式

想给虚拟 dom 添加行内样式，需要使用表达式传入样式对象的方式来实现：

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
<p style={{ color: "red", fontSize: "14px" }}>Hello world</p>

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链 js 文件中

• 使用class

React 推荐我们使用行内样式，因为 React 觉得每一个组件都是一个独立的整体

其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类 js 代码，会收到 js 规则的现在，而class是关键字）

<p className="hello" style={this.style}>
    Hello world
</p>

• 不同的条件添加不同的样式

有时候需要根据不同的条件添加不同的样式，比如：完成状态，完成是绿色，未完成是红色。那么这种情况下，我们推荐使用classnames这个包：

• css-in-js

styled-components是针对 React 写的一套 css-in-js 框架，简单来讲就是在 js 中写 css。npm 链接

七、组件的数据挂载方式

1、属性(props)

props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
    render() {
        return <h1>欢迎进入{this.props.name}的世界</h1>;
    }
}

const Content = props => {
    return <p>{props.name}是一个构建UI的库</p>;
};

class App extends Component {
    render() {
        return (
            <Fragment>
                <Title name="React" />
                <Content name="React.js" />
            </Fragment>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

(1) 设置组件的默认 props

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
    // 使用类创建的组件，直接在这里写static方法，创建defaultProps
    static defaultProps = {
        name: "React",
    };
    render() {
        return <h1>欢迎进入{this.props.name}的世界</h1>;
    }
}

const Content = props => {
    return <p>{props.name}是一个构建UI的库</p>;
};

// 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
    name: "React.js",
};

class App extends Component {
    render() {
        return (
            <Fragment>
                {/* 由于设置了defaultProps， 不传props也能正常运行，如果传递了就会覆盖defaultProps的值 */}
                <Title />
                <Content />
            </Fragment>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

(2) props.children

我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 props.children 。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
    render() {
        return <h1>欢迎进入{this.props.children}的世界</h1>;
    }
}

const Content = props => {
    return <p>{props.children}</p>;
};

class App extends Component {
    render() {
        return (
            <Fragment>
                <Title>React</Title>
                <Content>
                    <i>React.js</i>是一个构建UI的库
                </Content>
            </Fragment>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

(3) 使用 prop-types 检查 props

React 其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React 提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

$ npm i prop-types -S

2、状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)

(1) 定义 state

第一种方式

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
    state = {
        name: "React",
        isLiked: false,
    };
    render() {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button>{this.state.isLiked ? "❤️取消" : "🖤收藏"}</button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

另一种方式(推荐)

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: "React",
            isLiked: false,
        };
    }
    render() {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button>{this.state.isLiked ? "❤️取消" : "🖤收藏"}</button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

this.props和this.state是纯 js 对象,在 vue 中，data 属性是利用Object.defineProperty处理过的，更改 ​data 的数据的时候会触发数据的getter和setter，但是 React 中没有做这样的处理，如果直接更改的话，react 是无法得知的，所以，需要使用特殊的更改状态的方法setState。

(2) setState

isLiked 存放在实例的 state 对象当中，组件的 render 函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“收藏”内容。下面给 button 加上了点击的事件监听。

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: "React",
            isLiked: false,
        };
    }
    handleBtnClick = () => {
        this.setState({
            isLiked: !this.state.isLiked,
        });
    };
    render() {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button onClick={this.handleBtnClick}>{this.state.isLiked ? "❤️取消" : "🖤收藏"}</button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

setState有两个参数

第一个参数可以是对象，也可以是方法 return 一个对象，我们把这个参数叫做updater

• 参数是对象

  this.setState({
      isLiked: !this.state.isLiked,
  });

• 参数是方法

  this.setState((prevState, props) => {
      return {
          isLiked: !prevState.isLiked,
      };
  });

  注意的是这个方法接收两个参数，第一个是上一次的 state, 第二个是 props

setState是异步的，所以想要获取到最新的 state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState(
    (prevState, props) => {
        return {
            isLiked: !prevState.isLiked,
        };
    },
    () => {
        console.log("回调里的", this.state.isLiked);
    }
);
console.log("setState外部的", this.state.isLiked);

3、属性 vs 状态

相似点：都是纯 js 对象，都会触发 render 更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

4、状态提升

如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理

5、受控组件与非受控组件

React 组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则非受控组件。

6、渲染数据

• 条件渲染

  {
      condition ? "❤️取消" : "🖤收藏";
  }

• 列表渲染

// 数据
const people = [
    {
        id: 1,
        name: "Leo",
        age: 35,
    },
    {
        id: 2,
        name: "XiaoMing",
        age: 16,
    },
];
// 渲染列表
{
    people.map(person => {
        return (
            <dl key={person.id}>
                <dt>{person.name}</dt>
                <dd>age: {person.age}</dd>
            </dl>
        );
    });
}

React 的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是 React 并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是key，这个 key 必须是每个元素唯一的标识

https://www.infoq.cn/article/react-dom-diff/?utm_source=articles_about_dive-into-react&utm_medium=link&utm_campaign=dive-into-react

• dangerouslySetInnerHTML

对于富文本创建的内容，后台拿到的数据是这样的：

content = "<p>React.js是一个构建UI的库</p>";

处于安全的原因，React 当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslySetHTML属性，它允许我们动态设置innerHTML

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
    constructor() {
        super();
        this.state = {
            content: "<p>React.js是一个构建UI的库</p>",
        };
    }
    render() {
        return (
            <div
                // 注意这里是两个下下划线 __html
                dangerouslySetInnerHTML={{ __html: this.state.content }}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

• htmlFor, className

不能在元素上使用 for 和 class 做为属性关键字。

八、事件处理

1、绑定事件

采用 on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React 里的事件是驼峰onClick，React 的事件并不是原生事件，而是合成事件。

2、事件 handler 的写法

• 直接在 render 里写行内的箭头函数(不推荐)
• 在组件内使用箭头函数定义一个方法(推荐)
• 直接在组件内定义一个非箭头函数的方法，然后在 render 里直接使用onClick={this.handleClick.bind(this)}(不推荐)
• 直接在组件内定义一个非箭头函数的方法，然后在 constructor 里 bind(this)(推荐)

3、Event 对象

和普通浏览器一样，事件 handler 会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React 中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法

4、事件的参数传递

• 在render里调用方法的地方外面包一层箭头函数
• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

5、处理用户输入

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
    constructor() {
        super();
        this.state = {
            xing: "",
            ming: "",
        };
    }
    handleInputChange = e => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };
    render() {
        const { xing, ming } = this.state;
        return (
            <div>
                <label>
                    <span>姓:</span>
                    <input type="text" name="xing" value={xing} onChange={this.handleInputChange} />
                </label>
                <label>
                    <span>名:</span>
                    <input type="text" name="ming" value={ming} onChange={this.handleInputChange} />
                </label>
                <p>
                    欢迎您: {xing}
                    {ming}
                </p>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));

九、表单

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称：

<form>
    <label>
        名字:
        <input type="text" name="name" />
    </label>
    <input type="submit" value="提交" />
</form>

此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码，它依然有效。但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。

1、受控组件

在 HTML 中，表单元素（如、 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用<code>setState()</code>来更新。</p> <p>我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。</p> <p>例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：</p> <pre><code class="language-js">class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert("提交的名字: " + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <p>由于在表单元素上设置了 <code>value</code> 属性，因此显示的值将始终为 <code>this.state.value</code>，这使得 React 的 state 成为唯一数据源。由于 <code>handlechange</code> 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。</p> <p>对于受控组件来说，输入的值始终由 React 的 state 驱动。你也可以将 value 传递给其他 UI 元素，或者通过其他事件处理函数重置，但这意味着你需要编写更多的代码。</p> <h2>2、textarea 标签</h2> <p>在 HTML 中, <code><textarea></code> 元素通过其子元素定义其文本:</p> <pre><code><textarea> 你好， 这是在 text area 里的文本 </textarea></code></pre> <p>而在 React 中，<code><textarea></code> 使用 <code>value</code> 属性代替。这样，可以使得使用 <code><textarea></code> 的表单和使用单行 input 的表单非常类似：</p> <pre><code class="language-js">class EssayForm extends React.Component { constructor(props) { super(props); this.state = { value: "请撰写一篇关于你喜欢的 DOM 元素的文章.", }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert("提交的文章: " + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 文章: <textarea value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <p>请注意，<code>this.state.value</code> 初始化于构造函数中，因此文本区域默认有初值。</p> <h2>3、select 标签</h2> <p>在 HTML 中，<code><select></code> 创建下拉列表标签。例如，如下 HTML 创建了水果相关的下拉列表：</p> <pre><code><select> <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option selected value="coconut">椰子</option> <option value="mango">芒果</option> </select></code></pre> <p>请注意，由于 <code>selected</code> 属性的缘故，椰子选项默认被选中。React 并不会使用 <code>selected</code> 属性，而是在根 <code>select</code> 标签上使用 <code>value</code> 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：</p> <pre><code class="language-js">class FlavorForm extends React.Component { constructor(props) { super(props); this.state = { value: "coconut" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert("你喜欢的风味是: " + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 选择你喜欢的风味: <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option value="coconut">椰子</option> <option value="mango">芒果</option> </select> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <p>总的来说，这使得, <code><input type="text"></code>, <code><textarea></code> 和 <code><select></code>之类的标签都非常相似—它们都接受一个 <code>value</code> 属性，你可以使用它来实现受控组件。</p> <blockquote> <p>注意</p> <p>你可以将数组传递到 <code>value</code> 属性中，以支持在 <code>select</code> 标签中选择多个选项：</p> <pre><code><select multiple={true} value={['B', 'C']}></code></pre> </blockquote> <pre><code class="language-js">import React, { createRef } from "react"; class MulFlavorForm extends React.Component { constructor(props) { super(props); // createRef创建引用 this.select = createRef(); this.state = { value: "coconut", arr: [], options: [ { value: "grapefruit", label: "葡萄柚" }, { value: "lime", label: "酸橙" }, { value: "coconut", label: "椰子" }, { value: "mango", label: "芒果" }, ], }; } handleSelect = e => { let select = this.select.current; // select.options.map() let arr = []; Array.from(select.options).forEach(option => { if (option.selected) { arr.push(option.value); } }); this.setState({ arr, }); }; render() { return ( <div> <select ref={this.select} multiple={true} defaultValue={this.state.arr} onMouseUp={this.handleSelect} // onTouchStart={this.handleSelect} > {this.state.options.map((item, index) => { return ( <option value={item.value} key={index}> {item.label} </option> ); })} </select> {this.state.arr} </div> ); } } export default MulFlavorForm;</code></pre> <h2>4、处理多个输入</h2> <p>当需要处理多个 <code>input</code> 元素时，我们可以给每个元素添加 <code>name</code> 属性，并让处理函数根据 <code>event.target.name</code> 的值选择要执行的操作。</p> <pre><code class="language-js">class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2, }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === "checkbox" ? target.checked : target.value; const name = target.name; this.setState({ [name]: value, }); } render() { return ( <form> <label> 参与: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> 来宾人数: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }</code></pre> <h2>5、文件 input 标签</h2> <p>在 HTML 中，<code><input type="file"></code> 允许用户从存储设备中选择一个或多个文件，将其上传到服务器，或通过使用 JavaScript 的 File API 进行控制。</p> <pre><code class="language-html"><input type="file" /></code></pre> <p>因为它的 value 只读，所以它是 React 中的一个非受控组件。将与其他非受控组件在后续文档中一起讨论。</p> <h2>6、受控输入空值</h2> <p>在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将 value 设置为 undefined 或 null。</p> <p>下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）</p> <pre><code class="language-js">ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function () { ReactDOM.render(<input value={null} />, mountNode); }, 1000);</code></pre> <h2>7、非受控组件</h2> <p>在大多数情况下，我们推荐使用 <a href="https://zh-hans.reactjs.org/docs/forms.html#controlled-components" target="_blank" rel="nofollow" >受控组件</a> 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。</p> <p>要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 <a href="https://zh-hans.reactjs.org/docs/refs-and-the-dom.html" target="_blank" rel="nofollow" >使用 ref</a> 来从 DOM 节点中获取表单数据。</p> <p>例如，下面的代码使用非受控组件接受一个表单的值：</p> <pre><code class="language-js">class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.input = React.createRef(); } handleSubmit(event) { alert("A name was submitted: " + this.input.current.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={this.input} /> </label> <input type="submit" value="Submit" /> </form> ); } }</code></pre> <p>因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。</p> <h3>(1) 默认值</h3> <p>在 React 渲染生命周期时，表单元素上的 <code>value</code> 将会覆盖 DOM 节点中的值，在非受控组件中，你经常希望 React 能赋予组件一个初始值，但是不去控制后续的更新。 在这种情况下, 你可以指定一个 <code>defaultValue</code> 属性，而不是 <code>value</code>。</p> <pre><code class="language-js">render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input defaultValue="Bob" type="text" ref={this.input} /> </label> <input type="submit" value="Submit" /> </form> ); }</code></pre> <p>同样，<code><input type="checkbox"></code> 和 <code><input type="radio"></code> 支持 <code>defaultChecked</code>，<code><select></code> 和 <code><textarea></code> 支持 <code>defaultValue</code>。</p> <h3>(2) 文件输入</h3> <p>在 HTML 中，<code><input type="file"></code> 可以让用户选择一个或多个文件上传到服务器，或者通过使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications" target="_blank" rel="nofollow" >File API</a> 进行操作。</p> <p>在 React 中，<code><input type="file"></code> 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制。</p> <p>您应该使用 File API 与文件进行交互。下面的例子显示了如何创建一个 <a href="https://zh-hans.reactjs.org/docs/refs-and-the-dom.html" target="_blank" rel="nofollow" >DOM 节点的 ref</a> 从而在提交表单时获取文件的信息。</p> <pre><code class="language-js">class FileInput extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.fileInput = React.createRef(); } handleSubmit(event) { event.preventDefault(); alert(`Selected file - ${this.fileInput.current.files[0].name}`); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Upload file: <input type="file" ref={this.fileInput} /> </label> <br /> <button type="submit">Submit</button> </form> ); } } ReactDOM.render(<FileInput />, document.getElementById("root"));</code></pre> <h1>十、TodoList</h1> <p>组件化开发 React todolist， 项目开发中的组件的基本目录结构基本上是这样的：</p> <blockquote> <p>/your-project</p> <ul> <li>src <ul> <li>…</li> <li>components <ul> <li>YourComponentOne <ul> <li>index.js/YourComponentOne.js</li> </ul> </li> <li>YourComponentTwo <ul> <li>index.js/YourComponentTwo.js</li> </ul> </li> <li>index.js 用于导出组件</li> </ul> </li> </ul> </li> </ul> </blockquote> <p>注意：一个组件只干一件事情 ，所以 TodoList 和 TodoItem 要做成两个组件，这样也方便于后期理解 shouldComponentUpdate</p> <h1>十一、组件的生命周期</h1> <p>React 中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3 之后)</p> <h2>1、初始化</h2> <p>在组件初始化阶段会执行</p> <ol> <li> <p>constructor</p> </li> <li> <p>static getDerivedStateFromProps()</p> </li> <li> <p>componentWillMount() / UNSAFE_componentWillMount()</p> </li> <li> <p>render()</p> </li> <li> <p>componentDidMount()</p> </li> </ol> <h2>2、更新阶段</h2> <p><code>props</code>或<code>state</code>的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：</p> <p>1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps() <br /> 2. static getDerivedStateFromProps()<br /> 3. shouldComponentUpdate() <br /> 4. componentWillUpdate() / UNSAFE_componentWillUpdate() <br /> 5. render() <br /> 6. getSnapshotBeforeUpdate() <br /> 7. componentDidUpdate()</p> <h2>3、卸载阶段</h2> <ol> <li>componentWillUnmount()</li> </ol> <h2>4、错误处理</h2> <ol> <li>componentDidCatch()</li> </ol> <h2>5、各生命周期详解</h2> <p><strong>(1) constructor(props)</strong></p> <p>React 组件的构造函数在挂载之前被调用。在实现<code>React.Component</code>构造函数时，需要先在添加其他内容前，调用<code>super(props)</code>，用来将父组件传来的<code>props</code>绑定到这个类中，使用<code>this.props</code>将会得到。</p> <p>官方建议不要在<code>constructor</code>引入任何具有副作用和订阅功能的代码，这些应当使用<code>componentDidMount()</code>。</p> <p><code>constructor</code>中应当做些初始化的动作，如：初始化<code>state</code>，将事件处理函数绑定到类实例上，但也不要使用<code>setState()</code>。如果没有必要初始化 state 或绑定方法，则不需要构造<code>constructor</code>，或者把这个组件换成纯函数写法。</p> <p>当然也可以利用<code>props</code>初始化<code>state</code>，在之后修改<code>state</code>不会对<code>props</code>造成任何修改，但仍然建议大家提升状态到父组件中，或使用<code>redux</code>统一进行状态管理。</p> <pre><code class="language-jsx">constructor(props) { super(props); this.state = { isLiked: props.isLiked }; }</code></pre> <p><strong>(2) static getDerivedStateFromProps(nextProps, prevState)</strong></p> <p>React 的 16.3 版本中对生命周期进行了较大的调整，这是为了开发者能正确地使用生命周期，避免误解其概念而造成反模式。</p> <p>本节将重点介绍 getDerivedStateFromProps 这个生命周期。要注意的是，React 16.3 的版本中 getDerivedStateFromProps 的触发范围是和 16.4^ 是不同的，主要区别是在 <code>setState</code> 和 <code>forceUpdate</code> 时会不会触发，具体可以看这个<a href="http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" target="_blank" rel="nofollow" >生命全周期图</a> 。</p> <p>可能的使用场景有两个：</p> <ul> <li>无条件的根据 prop 来更新内部 state，也就是只要有传入 prop 值， 就更新 state</li> <li>只有 prop 值和 state 值不同时才更新 state 值。</li> </ul> <p>我们接下来看几个例子。</p> <p>假设我们有个一个表格组件，它会根据传入的列表数据来更新视图。</p> <pre><code class="language-jsx">class Table extends React.Component { state = { list: [] } static getDerivedStateFromProps (props, state) { return { list: props.list } } render () { .... // 展示 list } }</code></pre> <p>上面的例子就是第一种使用场景，但是无条件从 prop 中更新 state，我们完全没必要使用这个生命周期，直接对 prop 值进行操作就好了，无需用 state 值类保存。</p> <p>再看一个例子，这个例子是一个颜色选择器，这个组件能选择相应的颜色并显示，同时它能根据传入 prop 值显示颜色。</p> <pre><code class="language-jsx">Class ColorPicker extends React.Component { state = { color: '#000000' } static getDerivedStateFromProps (props, state) { if (props.color !== state.color) { return { color: props.color } } return null } ... // 选择颜色方法 render () { .... // 显示颜色和选择颜色操作 } }</code></pre> <p>现在我们可以这个颜色选择器来选择颜色，同时我们能传入一个颜色值并显示。但是这个组件有一个 bug，如果我们传入一个颜色值后，再使用组件内部的选择颜色方法，我们会发现颜色不会变化，一直是传入的颜色值。</p> <p>这是使用这个生命周期的一个常见 bug。为什么会发生这个 bug 呢？在开头有说到，在 React 16.4^ 的版本中 <code>setState</code> 和 <code>forceUpdate</code> 也会触发这个生命周期，所以内部 state 变化后，又会走 getDerivedStateFromProps 方法，并把 state 值更新为传入的 prop。</p> <p>接下里我们来修复这个 bug。</p> <pre><code class="language-jsx">Class ColorPicker extends React.Component { state = { color: '#000000', prevPropColor: '' } static getDerivedStateFromProps (props, state) { if (props.color === state.prevColor) { // 如果在组建的内部更新的state, 不需要在这个钩子里重复的赋值 return { prevColor: state.color } } else { return { color: props.color, prevColor: props.color } } } ... // 选择颜色方法 render () { .... // 显示颜色和选择颜色操作 } }</code></pre> <p>通过保存一个之前 prop 值，我们就可以在只有 prop 变化时才去修改 state。这样就解决上述的问题。</p> <p>这里小结下 getDerivedStateFromProps 方法使用的注意点：</p> <ul> <li>在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较。</li> <li>因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。</li> </ul> <p>我们应该谨慎地使用 getDerivedStateFromProps 这个生命周期。使用时要注意下面几点：</p> <ul> <li>因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。</li> <li>在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较（这个 prop 值最好有唯一性，或者使用一个唯一性的 prop 值来专门比较）。</li> <li>不使用 getDerivedStateFromProps，可以改成组件保持完全不可控模式，通过初始值和 key 值来实现 prop 改变 state 的情景。</li> </ul> <p><strong>(3) componentWillMount() / UNSAFE_componentWillMount()</strong></p> <p><code>componentWillMount()</code>将在 React 未来版本(官方说法 17.0)中被弃用。<code>UNSAFE_componentWillMount()</code>在组件挂载前被调用，在这个方法中调用<code>setState()</code>不会起作用，是由于他在<code>render()</code>前被调用。</p> <p>为了避免副作用和其他的订阅，官方都建议使用<code>componentDidMount()</code>代替。这个方法是用于在服务器渲染上的唯一方法。这个方法因为是在渲染之前被调用，也是惟一一个可以直接同步修改 state 的地方。</p> <p><strong>(4) render()</strong></p> <p>render()方法是必需的。当他被调用时，他将计算<code>this.props</code>和<code>this.state</code>，并返回以下一种类型：</p> <ul> <li>React 元素。通过 jsx 创建，既可以是 dom 元素，也可以是用户自定义的组件。</li> <li>字符串或数字。他们将会以文本节点形式渲染到 dom 中。</li> <li>Portals。react 16 版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在 DOM 树的任何位置。</li> <li>null，什么也不渲染</li> <li>布尔值。也是什么都不渲染。</li> </ul> <p>当返回<code>null</code>,<code>false</code>,<code>ReactDOM.findDOMNode(this)</code>将会返回 null，什么都不会渲染。</p> <p><code>render()</code>方法必须是一个纯函数，他不应该改变<code>state</code>，也不能直接和浏览器进行交互，应该将事件放在其他生命周期函数中。<br /> 如果<code>shouldComponentUpdate()</code>返回<code>false</code>，<code>render()</code>不会被调用。</p> <p><strong>(5) componentDidMount</strong></p> <p><code>componentDidMount</code>在组件被装配后立即调用。初始化使得 DOM 节点应该进行到这里。</p> <p><strong>通常在这里进行 ajax 请求</strong></p> <p>如果要初始化第三方的 dom 库，也在这里进行初始化。只有到这里才能获取到真实的 dom.</p> <p><strong>(6) componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)</strong></p> <p>官方建议使用<code>getDerivedStateFromProps</code>函数代替<code>componentWillReceiveProps</code>。当组件挂载后，接收到新的<code>props</code>后会被调用。如果需要更新<code>state</code>来响应<code>props</code>的更改，则可以进行<code>this.props</code>和<code>nextProps</code>的比较，并在此方法中使用<code>this.setState()</code>。</p> <p>如果父组件会让这个组件重新渲染，即使<code>props</code>没有改变，也会调用这个方法。</p> <p>React 不会在组件初始化 props 时调用这个方法。调用<code>this.setState</code>也不会触发。</p> <p><strong>(7) shouldComponentUpdate(nextProps, nextState)</strong></p> <p>调用<code>shouldComponentUpdate</code>使 React 知道，组件的输出是否受<code>state</code>和<code>props</code>的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。</p> <p>在渲染新的<code>props</code>或<code>state</code>前，<code>shouldComponentUpdate</code>会被调用。默认为<code>true</code>。这个方法不会在初始化时被调用，也不会在<code>forceUpdate()</code>时被调用。返回<code>false</code>不会阻止子组件在<code>state</code>更改时重新渲染。</p> <p>如果<code>shouldComponentUpdate()</code>返回<code>false</code>，<code>componentWillUpdate</code>,<code>render</code>和<code>componentDidUpdate</code>不会被调用。</p> <blockquote> <p>官方并不建议在<code>shouldComponentUpdate()</code>中进行深度查询或使用<code>JSON.stringify()</code>，他效率非常低，并且损伤性能。</p> </blockquote> <p><strong>(8) UNSAFE_componentWillUpdate(nextProps, nextState)</strong></p> <p>在渲染新的<code>state</code>或<code>props</code>时，<code>UNSAFE_componentWillUpdate</code>会被调用，将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。</p> <p><em>不能在这里使用 this.setState()</em>，也不能做会触发视图更新的操作。如果需要更新<code>state</code>或<code>props</code>，调用<code>getDerivedStateFromProps</code>。</p> <p><strong>(9) getSnapshotBeforeUpdate()</strong></p> <p>在 react <code>render()</code>后的输出被渲染到 DOM 之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给 componentDidUpdate（）。</p> <p><strong>(10) componentDidUpdate(prevProps, prevState, snapshot)</strong></p> <p>在更新发生后立即调用<code>componentDidUpdate()</code>。此方法不用于初始渲染。当组件更新时，将此作为一个机会来操作 DOM。只要您将当前的 props 与以前的 props 进行比较（例如，如果 props 没有改变，则可能不需要网络请求），这也是做网络请求的好地方。</p> <p>如果组件实现<code>getSnapshotBeforeUpdate()</code>生命周期，则它返回的值将作为第三个“快照”参数传递给<code>componentDidUpdate()</code>。否则，这个参数是<code>undefined</code>。</p> <p><strong>(11) componentWillUnmount()</strong></p> <p>在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在<code>componentDidMount</code>中创建的任何监听。</p> <p><strong>(12) componentDidCatch(error, info)</strong></p> <p>错误边界是 React 组件，可以在其子组件树中的任何位置捕获 JavaScript 错误，记录这些错误并显示回退 UI，而不是崩溃的组件树。错误边界在渲染期间，生命周期方法以及整个树下的构造函数中捕获错误。</p> <p>如果类组件定义了此生命周期方法，则它将成错误边界。在它中调用<code>setState()</code>可以让你在下面的树中捕获未处理的 JavaScript 错误，并显示一个后备 UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。</p> <p>错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误。</p> <h2>6、PureComponent</h2> <p><code>PureComponnet</code>里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话，就不会去重新 render 了<br /> 在里面也可以使用<code>shouldComponentUpdate</code>，而且。是否重新渲染以<code>shouldComponentUpdate</code>的返回值为最终的决定因素。</p> <pre><code class="language-jsx">import React, { PureComponent } from 'react' class YourComponent extends PureComponent { …… }</code></pre> <h2>7、ref</h2> <p>React 提供的这个<code>ref</code>属性，表示为对组件真正实例的引用，其实就是<code>ReactDOM.render()</code>返回的组件实例,<code>ref</code>可以挂载到组件上也可以是 dom 元素上。</p> <ul> <li>挂到组件(<code>class</code>声明的组件)上的 ref 表示对组件实例的引用。<strong>不能</strong>在函数式组件上使用 ref 属性，因为它们没有实例：</li> <li>挂载到 dom 元素上时表示具体的 dom 元素节点。</li> </ul> <p>在 React 最新的版本中，要使用<code>ref</code>, 需要使用<code>React.createRef</code>方法先生成一个<code>ref</code>。</p> <pre><code class="language-jsx">import React, { Component, createRef } from "react"; import ReactDOM from "react-dom"; class App extends Component { constructor() { super(); // 创建inputRef this.inputRef = createRef(); } componentDidMount() { console.log(this.inputRef.current); // <input type="text"> } render() { return ( <div> {/* 关联ref和dom */} <input type="text" ref={this.inputRef} /> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));</code></pre> <h1>十二、组件通信</h1> <p><strong>父组件与子组件通信</strong></p> <ul> <li> <p>父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变</p> </li> <li> <p>父组件利用<code>ref</code>对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法..</p> </li> </ul> <p><strong>子组件与父组件通信</strong></p> <ul> <li>父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过<code>this.props</code>接收到父组件的方法后调用。</li> </ul> <p><strong>跨组件通信</strong></p> <p>在 react 没有类似 vue 中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react 提供了<code>context</code> api 来实现跨组件通信, React 16.3 之后的<code>context</code>api 较之前的好用。</p> <p>实例，使用<code>context</code> 实现购物车中的加减功能</p> <pre><code class="language-jsx">// counterContext.js import React, { Component, createContext } from "react"; const { Provider, Consumer: CountConsumer } = createContext(); class CountProvider extends Component { constructor() { super(); this.state = { count: 1, }; } increaseCount = () => { this.setState({ count: this.state.count + 1, }); }; decreaseCount = () => { this.setState({ count: this.state.count - 1, }); }; render() { return ( <Provider value={{ count: this.state.count, increaseCount: this.increaseCount, decreaseCount: this.decreaseCount, }} > {this.props.children} </Provider> ); } } export { CountProvider, CountConsumer };</code></pre> <pre><code class="language-jsx">// 定义CountButton组件 const CountButton = props => { return ( <CountConsumer> // consumer的children必须是一个方法 {({ increaseCount, decreaseCount }) => { const { type } = props; const handleClick = type === "increase" ? increaseCount : decreaseCount; const btnText = type === "increase" ? "+" : "-"; return <button onClick={handleClick}>{btnText}</button>; }} </CountConsumer> ); };</code></pre> <pre><code class="language-jsx">// 定义count组件，用于显示数量 const Count = prop => { return ( <CountConsumer> {({ count }) => { return <span>{count}</span>; }} </CountConsumer> ); };</code></pre> <pre><code class="language-jsx">// 组合 class App extends Component { render() { return ( <CountProvider> <CountButton type="decrease" /> <Count /> <CountButton type="increase" /> </CountProvider> ); } }</code></pre> <blockquote> <p>复杂的非父子组件通信在 react 中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用 flux、redux、mobx 来实现</p> </blockquote> <h1>十三、HOC(高阶组件)</h1> <p>Higher-Order Components 就是一个函数，传给它一个组件，它返回一个新的组件。</p> <pre><code class="language-jsx">const NewComponent = higherOrderComponent(YourComponent);</code></pre> <p>比如，我们想要我们的组件通过自动注入一个版权信息。</p> <pre><code class="language-jsx">// withCopyright.js 定义一个高阶组件 import React, { Component, Fragment } from "react"; const withCopyright = WrappedComponent => { return class NewComponent extends Component { render() { return ( <Fragment> <WrappedComponent /> <div>©版权所有 千锋教育 2019 </div> </Fragment> ); } }; }; export default withCopyright;</code></pre> <pre><code class="language-jsx">// 使用方式 import withCopyright from "./withCopyright"; class App extends Component { render() { return ( <div> <h1>Awesome React</h1> <p>React.js是一个构建用户界面的库</p> </div> ); } } const CopyrightApp = withCopyright(App);</code></pre> <p>这样只要我们有需要用到版权信息的组件，都可以直接使用 withCopyright 这个高阶组件包裹即可。</p> <p>在这里要讲解在 CRA 中配置装饰器模式的支持。</p> <h1>十四、Portal</h1> <p>Portals 提供了一个最好的在父组件包含的 DOM 结构层级外的 DOM 节点渲染组件的方法。</p> <pre><code class="language-js">ReactDOM.createPortal(child, container);</code></pre> <p>第一个参数 child 是可渲染的 react 子项，比如元素，字符串或者片段等。第二个参数 container 是一个 DOM 元素。</p> <h2>1、用法</h2> <p>普通的组件，子组件的元素将挂载到父组件的 DOM 节点中。</p> <pre><code class="language-js">render() { // React 挂载一个div节点，并将子元素渲染在节点中 return ( <div> {this.props.children} </div> ); }</code></pre> <p>有时需要将元素渲染到 DOM 中的不同位置上去，这是就用到的 portal 的方法。</p> <pre><code class="language-js">render(){ // 此时React不再创建div节点，而是将子元素渲染到Dom节点上。domNode，是一个有效的任意位置的dom节点。 return ReactDOM.createPortal( this.props.children, domNode ) }</code></pre> <p>一个典型的用法就是当父组件的 dom 元素有 <code>overflow:hidden</code>或者<code>z-inde</code>样式，而你又需要显示的子元素超出父元素的盒子。举例来说，如对话框，悬浮框，和小提示。</p> <h2>2、在 protal 中的事件冒泡</h2> <p>虽然通过 portal 渲染的元素在父组件的盒子之外，但是渲染的 dom 节点仍在 React 的元素树上，在那个 dom 元素上的点击事件仍然能在 dom 树中监听到。</p> <pre><code class="language-react">import React, { Component } from 'react'; import ReactDOM from 'react-dom'; const getDiv = () => { const div = document.createElement('div'); document.body.appendChild(div); return div; }; const withPortal = (WrappedComponent) => { class AddPortal extends Component { constructor(props) { super(props); this.el = getDiv(); } componentWillUnmount() { document.body.removeChild(this.el); } render(props) { return ReactDOM.createPortal(<WrappedComponent {...props} />, this.el); } } return AddPortal; }; class Modal extends Component { render() { return ( <div> <div>amodal content</div> <button type="button">Click</button> </div> ); } } const PortalModal = withPortal(Modal); class Page extends Component { constructor(props) { super(props); this.state = { clicks: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ clicks: state.clicks + 1 })); } render() { return ( <div onClick={this.handleClick}> <h3>ppppppppp</h3> <h3>num: {this.state.clicks}</h3> <PortalModal /> </div> ); } } export default Page;</code></pre> <h1>十五、状态管理</h1> <h2>1、传统 MVC 框架的缺陷</h2> <p><strong>什么是 MVC？</strong></p> <p><img decoding="async" src="./images/mvc-base.png" alt="image-20190420010944626" /></p> <p><code>MVC</code>的全名是<code>Model View Controller</code>，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。</p> <p><code>V</code>即 View 视图是指用户看到并与之交互的界面。</p> <p><code>M</code>即 Model 模型是管理数据 ，很多业务逻辑都在模型中完成。在 MVC 的三个部件中，模型拥有最多的处理任务。</p> <p><code>C</code>即 Controller 控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。</p> <p><strong>MVC 只是看起来很美</strong></p> <p>MVC 框架的数据流很理想，请求先到 Controller, 由 Controller 调用 Model 中的数据交给 View 进行渲染，但是在实际的项目中，又是允许 Model 和 View 直接通信的。然后就出现了这样的结果：</p> <p><img decoding="async" src="./images/defect-of-mvc.png" alt="image-20190420012010718" /></p> <h2>2、Flux</h2> <p>在 2013 年，Facebook 让<code>React</code>亮相的同时推出了 Flux 框架，<code>React</code>的初衷实际上是用来替代<code>jQuery</code>的，<code>Flux</code>实际上就可以用来替代<code>Backbone.js</code>，<code>Ember.js</code>等一系列<code>MVC</code>架构的前端 JS 框架。</p> <p>其实<code>Flux</code>在<code>React</code>里的应用就类似于<code>Vue</code>中的<code>Vuex</code>的作用，但是在<code>Vue</code>中，<code>Vue</code>是完整的<code>mvvm</code>框架，而<code>Vuex</code>只是一个全局的插件。</p> <p><code>React</code>只是一个 MVC 中的 V(视图层)，只管页面中的渲染，一旦有数据管理的时候，<code>React</code>本身的能力就不足以支撑复杂组件结构的项目，在传统的<code>MVC</code>中，就需要用到 Model 和 Controller。Facebook 对于当时世面上的<code>MVC</code>框架并不满意，于是就有了<code>Flux</code>, 但<code>Flux</code>并不是一个<code>MVC</code>框架，他是一种新的思想。</p> <p><img decoding="async" src="./images/flux.png" alt="image-20190420012450223" /></p> <ul> <li>View： 视图层</li> <li>ActionCreator（动作创造者）：视图层发出的消息（比如 mouseClick）</li> <li>Dispatcher（派发器）：用来接收 Actions、执行回调函数</li> <li>Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒 Views 要更新页面</li> </ul> <p>Flux 的流程：</p> <ol> <li>组件获取到 store 中保存的数据挂载在自己的状态上</li> <li>用户产生了操作，调用 actions 的方法</li> <li>actions 接收到了用户的操作，进行一系列的逻辑代码、异步操作</li> <li>然后 actions 会创建出对应的 action，action 带有标识性的属性</li> <li>actions 调用 dispatcher 的 dispatch 方法将 action 传递给 dispatcher</li> <li>dispatcher 接收到 action 并根据标识信息判断之后，调用 store 的更改数据的方法</li> <li>store 的方法被调用后，更改状态，并触发自己的某一个事件</li> <li>store 更改状态后事件被触发，该事件的处理程序会通知 view 去获取最新的数据</li> </ol> <h2>3、Redux</h2> <p>React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。</p> <ul> <li>代码结构</li> <li>组件之间的通信</li> </ul> <p>2013 年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015 年，Redux 出现，将 Flux 与<a href="https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/" target="_blank" rel="nofollow" >函数式编程</a>结合一起，很短时间内就成为了最热门的前端架构。</p> <p>如果你不知道是否需要 Redux，那就是不需要它</p> <p>只有遇到 React 实在解决不了的问题，你才需要 Redux</p> <p>简单说，如果你的 UI 层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。</p> <ul> <li>用户的使用方式非常简单</li> <li>用户之间没有协作</li> <li>不需要与服务器大量交互，也没有使用 WebSocket</li> <li>视图层（View）只从单一来源获取数据</li> </ul> <p><strong>需要使用 Redux 的项目:</strong></p> <ul> <li>用户的使用方式复杂</li> <li>不同身份的用户有不同的使用方式（比如普通用户和管理员）</li> <li>多个用户之间可以协作</li> <li>与服务器大量交互，或者使用了 WebSocket</li> <li>View 要从多个来源获取数据</li> </ul> <p><strong>从组件层面考虑，什么样子的需要 Redux：</strong></p> <ul> <li>某个组件的状态，需要共享</li> <li>某个状态需要在任何地方都可以拿到</li> <li>一个组件需要改变全局状态</li> <li>一个组件需要改变另一个组件的状态</li> </ul> <p><strong>Redux 的设计思想：</strong></p> <ol> <li>Web 应用是一个状态机，视图与状态是一一对应的。</li> <li>所有的状态，保存在一个对象里面（唯一数据源）。</li> </ol> <blockquote> <p>注意：flux、redux 都不是必须和 react 搭配使用的，因为 flux 和 redux 是完整的架构，在学习 react 的时候，只是将 react 的组件作为 redux 中的视图层去使用了。</p> </blockquote> <p><strong>Redux 的使用的三大原则：</strong></p> <ul> <li>Single Source of Truth(唯一的数据源)</li> <li>State is read-only(状态是只读的)</li> <li>Changes are made with pure function(数据的改变必须通过纯函数完成)</li> </ul> <h3>(1) 自己实现 Redux</h3> <p>这个部分，不使用 react，直接使用原生的 html/js 来写一个简易的的 redux</p> <p><strong>基本的状态管理及数据渲染：</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Redux principle 01</title> </head> <body> <h1>redux principle</h1> <div class="counter"> <span class="btn" onclick="dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span> <span class="count" id="count"></span> <span class="btn" id="add" onclick="dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span> </div> <script> // 定义一个计数器的状态 const countState = { count: 10, }; // 定一个方法叫changeState，用于处理state的数据，每次都返回一个新的状态 const changeState = action => { switch (action.type) { // 处理减 case "COUNT_DECREMENT": countState.count -= action.number; break; // 处理加 case "COUNT_INCREMENT": countState.count += action.number; break; default: break; } }; // 定义一个方法用于渲染计数器的dom const renderCount = state => { const countDom = document.querySelector("#count"); countDom.innerHTML = state.count; }; // 首次渲染数据 renderCount(countState); // 定义一个dispatch的方法，接收到动作之后，自动调用 const dispatch = action => { changeState(action); renderCount(countState); }; </script> </body> </html></code></pre> <p><strong>创建 createStore 方法</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Redux principle 02</title> </head> <body> <h1>redux principle</h1> <div class="counter"> <span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span> <span class="count" id="count"></span> <span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span> </div> <script> // 定义一个方法，用于集中管理state和dispatch const createStore = (state, changeState) => { // getState用于获取状态 const getState = () => state; // 定义一个监听器，用于管理一些方法 const listeners = []; const subscribe = listener => listeners.push(listener); // 定义一个dispatch方法，让每次有action传入的时候返回render执行之后的结果 const dispatch = action => { // 调用changeState来处理数据 changeState(state, action); // 让监听器里的所以方法运行 listeners.forEach(listener => listener()); }; return { getState, dispatch, subscribe, }; }; // 定义一个计数器的状态 const countState = { count: 10, }; // 定一个方法叫changeState，用于处理state的数据，每次都返回一个新的状态 const changeState = (state, action) => { switch (action.type) { // 处理减 case "COUNT_DECREMENT": state.count -= action.number; break; // 处理加 case "COUNT_INCREMENT": state.count += action.number; break; default: break; } }; // 创建一个store const store = createStore(countState, changeState); // 定义一个方法用于渲染计数器的dom const renderCount = () => { const countDom = document.querySelector("#count"); countDom.innerHTML = store.getState().count; }; // 初次渲染数据 renderCount(); // 监听，只要有dispatch，这个方法就会自动运行 store.subscribe(renderCount); </script> </body> </html></code></pre> <p><strong>让 changeState 方法变为一个纯函数</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Redux principle 03</title> </head> <body> <h1>redux principle</h1> <div class="counter"> <span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span> <span class="count" id="count"></span> <span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span> </div> <script> // 定义一个方法，用于集中管理state和dispatch const createStore = (state, changeState) => { // getState用于获取状态 const getState = () => state; // 定义一个监听器，用于管理一些方法 const listeners = []; const subscribe = listener => listeners.push(listener); // 定义一个dispatch方法，让每次有action传入的时候返回render执行之后的结果 const dispatch = action => { // 调用changeState来处理数据 state = changeState(state, action); // 让监听器里的所有方法运行 listeners.forEach(listener => listener()); }; return { getState, dispatch, subscribe, }; }; // 定义一个计数器的状态 const countState = { count: 10, }; // 定一个方法叫changeState，用于处理state的数据，每次都返回一个新的状态 const changeState = (state, action) => { switch (action.type) { // 处理减 case "COUNT_DECREMENT": return { ...state, count: state.count - action.number, }; // 处理加 case "COUNT_INCREMENT": return { ...state, count: state.count + action.number, }; default: return state; } }; // 创建一个store const store = createStore(countState, changeState); // 定义一个方法用于渲染计数器的dom const renderCount = () => { const countDom = document.querySelector("#count"); countDom.innerHTML = store.getState().count; }; // 初次渲染数据 renderCount(); // 监听，只要有dispatch，这个方法就会自动运行 store.subscribe(renderCount); </script> </body> </html></code></pre> <p><strong>合并 state 和 changeState(最终版)</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Redux principle 04</title> </head> <body> <h1>redux principle</h1> <div class="counter"> <span class="btn" onclick="store.dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span> <span class="count" id="count"></span> <span class="btn" id="add" onclick="store.dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span> </div> <script> // 定义一个方法，用于集中管理state和dispatch, changeState改名了，专业的叫法是reducer const createStore = reducer => { // 定义一个初始的state let state = null; // getState用于获取状态 const getState = () => state; // 定义一个监听器，用于管理一些方法 const listeners = []; const subscribe = listener => listeners.push(listener); // 定义一个dispatch方法，让每次有action传入的时候返回reducer执行之后的结果 const dispatch = action => { // 调用reducer来处理数据 state = reducer(state, action); // 让监听器里的所有方法运行 listeners.forEach(listener => listener()); }; // 初始化state dispatch({}); return { getState, dispatch, subscribe, }; }; // 定义一个计数器的状态 const countState = { count: 10, }; // 定一个方法叫changeState，用于处理state的数据，每次都返回一个新的状态 const reducer = (state, action) => { // 如果state是null, 就返回countState if (!state) return countState; switch (action.type) { // 处理减 case "COUNT_DECREMENT": return { ...state, count: state.count - action.number, }; // 处理加 case "COUNT_INCREMENT": return { ...state, count: state.count + action.number, }; default: return state; } }; // 创建一个store const store = createStore(reducer); // 定义一个方法用于渲染计数器的dom const renderCount = () => { const countDom = document.querySelector("#count"); countDom.innerHTML = store.getState().count; }; // 初次渲染数据 renderCount(); // 监听，只要有dispatch，renderCount就会自动运行 store.subscribe(renderCount); </script> </body> </html></code></pre> <h3>(2) 使用 Redux 框架</h3> <p><strong>Redux 的流程：</strong></p> <p><img decoding="async" src="./images/redux.png" alt="image-20190420013410981" /></p> <ul> <li> <p>store 通过 reducer 创建了初始状态</p> </li> <li> <p>view 通过 store.getState()获取到了 store 中保存的 state 挂载在了自己的状态上</p> </li> <li> <p>用户产生了操作，调用了 actions 的方法</p> </li> <li> <p>actions 的方法被调用，创建了带有标示性信息的 action</p> </li> <li> <p>actions 将 action 通过调用 store.dispatch 方法发送到了 reducer 中</p> </li> <li> <p>reducer 接收到 action 并根据标识信息判断之后返回了新的 state</p> </li> <li> <p>store 的 state 被 reducer 更改为新 state 的时候，store.subscribe 方法里的回调函数会执行，此时就可以通知 view 去重新获取 state</p> </li> </ul> <p><strong>Reducer 必须是一个纯函数：</strong></p> <p>Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。Reducer 不是只有 Redux 里才有，之前学的数组方法<code>reduce</code>, 它的第一个参数就是一个 reducer</p> <p>纯函数是函数式编程的概念，必须遵守以下一些约束。</p> <ul> <li> <p>不得改写参数</p> </li> <li> <p>不能调用系统 I/O 的 API</p> </li> <li> <p>不能调用 Date.now()或者 Math.random()等不纯的方法，因为每次会得到不一样的结果</p> </li> </ul> <p>由于 Reducer 是纯函数，就可以保证同样的 State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。</p> <pre><code class="language-js">// State 是一个对象 function reducer(state = defaultState, action) { return Object.assign({}, state, { thingToChange }); // 或者 return { ...state, ...newState }; } // State 是一个数组 function reducer(state = defaultState, action) { return [...state, newItem]; }</code></pre> <p>最好把 State 对象设成只读。要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变(immutable)的对象。</p> <p>我们可以通过在 createStore 中传入第二个参数来设置默认的 state，但是这种形式只适合于只有一个 reducer 的时候。</p> <p><strong>划分 reducer</strong>:</p> <p>因为一个应用中只能有一个大的 state，这样的话 reducer 中的代码将会特别特别的多，那么就可以使用 combineReducers 方法将已经分开的 reducer 合并到一起</p> <blockquote> <p>注意：</p> <ol> <li>分离 reducer 的时候，每一个 reducer 维护的状态都应该不同</li> <li>通过 store.getState 获取到的数据也是会按照 reducers 去划分的</li> <li>划分多个 reducer 的时候，默认状态只能创建在 reducer 中，因为划分 reducer 的目的，就是为了让每一个 reducer 都去独立管理一部分状态</li> </ol> </blockquote> <p><em>最开始一般基于计数器的例子讲解 redux 的基本使用即可</em>。</p> <p>关于 action/reducer/store 的更多概念，请查看<a href="https://www.redux.org.cn/" target="_blank" rel="nofollow" >官网</a></p> <p><strong>Redux 异步</strong></p> <p>通常情况下，action 只是一个对象，不能包含异步操作，这导致了很多创建 action 的逻辑只能写在组件中，代码量较多也不便于复用，同时对该部分代码测试的时候也比较困难，组件的业务逻辑也不清晰，使用中间件了之后，可以通过 actionCreator 异步编写 action，这样代码就会拆分到 actionCreator 中，可维护性大大提高，可以方便于测试、复用，同时 actionCreator 还集成了异步操作中不同的 action 派发机制，减少编码过程中的代码量</p> <p>常见的异步库：</p> <ul> <li>Redux-thunk</li> <li>Redux-saga</li> <li>Redux-effects</li> <li>Redux-side-effects</li> <li>Redux-loop</li> <li>Redux-observable</li> <li>…</li> </ul> <p>基于 Promise 的异步库：</p> <ul> <li>Redux-promise</li> <li>Redux-promises</li> <li>Redux-simple-promise</li> <li>Redux-promise-middleware</li> <li>…</li> </ul> <h3>(3) 容器组件（Smart/Container Components）和展示组件（Dumb/Presentational Components）</h3> <table> <thead> <tr> <th style="text-align: right;"></th> <th style="text-align: left;">展示组件</th> <th style="text-align: left;">容器组件</th> </tr> </thead> <tbody> <tr> <td style="text-align: right;">作用</td> <td style="text-align: left;">描述如何展现（骨架、样式）</td> <td style="text-align: left;">描述如何运行（数据获取、状态更新）</td> </tr> <tr> <td style="text-align: right;">直接使用 Redux</td> <td style="text-align: left;">否</td> <td style="text-align: left;">是</td> </tr> <tr> <td style="text-align: right;">数据来源</td> <td style="text-align: left;">props</td> <td style="text-align: left;">监听 Redux state</td> </tr> <tr> <td style="text-align: right;">数据修改</td> <td style="text-align: left;">从 props 调用回调函数</td> <td style="text-align: left;">向 Redux 派发 actions</td> </tr> <tr> <td style="text-align: right;">调用方式</td> <td style="text-align: left;">手动</td> <td style="text-align: left;">通常由 React Redux 生成</td> </tr> </tbody> </table> <h3>(4) 使用 react-redux</h3> <p>可以先结合<code>context</code>来手动连接 react 和 redux。</p> <p>react-redux 提供两个核心的 api：</p> <ul> <li>Provider: 提供 store</li> <li> <p>connect: 用于连接容器组件和展示组件</p> <ul> <li> <p>Provider</p> <p>根据单一 store 原则 ，一般只会出现在整个应用程序的最顶层。</p> </li> <li> <p>connect</p> <p>语法格式为</p> <p><code>connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)</code></p> <p>一般来说只会用到前面两个，它的作用是：</p> <ul> <li>把<code>store.getState()</code>的状态转化为展示组件的<code>props</code></li> <li>把<code>actionCreators</code>转化为展示组件<code>props</code>上的方法</li> </ul> </li> </ul> </li> </ul> <blockquote> <p>特别强调：</p> <p>官网上的第二个参数为 mapDispatchToProps, 实际上就是 actionCreators</p> </blockquote> <p>只要上层中有<code>Provider</code>组件并且提供了<code>store</code>, 那么，子孙级别的任何组件，要想使用<code>store</code>里的状态，都可以通过<code>connect</code>方法进行连接。如果只是想连接<code>actionCreators</code>，可以第一个参数传递为<code>null</code></p> <h1>十六、Immutable.js</h1> <h2>1、JavaScript 数据修改的问题</h2> <p>看一段大家熟悉的代码</p> <pre><code class="language-js">const state = { str: "千锋教育", obj: { y: 1, }, arr: [1, 2, 3], }; const newState = state; console.log(newState === state); // true</code></pre> <p>由于 js 的对象和数组都是引用类型。所以 newState 的 state 实际上是指向于同一块内存地址的, 所以结果是 newState 和 state 是相等的。</p> <p>尝试修改一下数据</p> <pre><code class="language-js">const state = { str: "千锋教育", obj: { y: 1, }, arr: [1, 2, 3], }; const newState = state; newState.str = "千锋教育H5学院"; console.log(state.str, newState.str);</code></pre> <p>可以看到，newState 的修改也会引起 state 的修改。要解决这个问题，js 中提供了另一种修改数据的方式，要修改一个数据之前先制作一份数据的拷贝，像这样</p> <pre><code class="language-js">const state = { str: "千锋教育", obj: { y: 1, }, arr: [1, 2, 3], }; const newState = Object.assign({}, state); newState.str = "千锋教育H5学院"; console.log(state.str, newState.str);</code></pre> <p>我们可以使用很多方式在 js 中复制数据，比如<code>…</code>, <code>Object.assign</code>, <code>Object.freeze</code>, <code>slice</code>, <code>concat</code>, <code>map</code>, <code>filter</code>, <code>reduce</code>等方式进行复制，但这些都是浅拷贝，就是只拷贝第一层数据，更深层的数据还是同一个引用，比如：</p> <pre><code class="language-js">const state = { str: "千锋教育", obj: { y: 1, }, arr: [1, 2, 3], }; const newState = Object.assign({}, state); newState.obj.y = 2; newState.arr.push(4); console.log(state, newState);</code></pre> <p>可以看到，当在更改 newState 更深层次的数据的时候，还是会影响到 state 的值。如果要深层复制，就得一层一层的做递归拷贝，这是一个复杂的问题。虽然有些第三方的库已经帮我们做好了，比如<code>lodash</code>的<code>cloneDeep</code>方法。深拷贝是非常消耗性能的。</p> <pre><code class="language-js">import { cloneDeep } from "lodash"; const state = { str: "千锋教育", obj: { y: 1, }, arr: [1, 2, 3], }; const newState = cloneDeep(state); newState.obj.y = 2; newState.arr.push(4); console.log(state, newState);</code></pre> <h2>2、什么是不可变数据</h2> <p>不可变数据 (Immutable Data )就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构（ Persistent Data Structure），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 结构共享（Structural Sharing），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。</p> <p><img decoding="async" src="./images/structure-sharing.png" alt="react" /></p> <h2>3、immutable.js 的优缺点</h2> <p><strong>优点：</strong></p> <ul> <li>降低 mutable 带来的复杂度</li> <li>节省内存</li> <li>历史追溯性（时间旅行）：时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行，想一下如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在 redux 或者 flux 中特别有用</li> <li>拥抱函数式编程：immutable 本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便。推荐一本函数式编程的在线免费书《<a href="https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/" target="_blank" rel="nofollow" >JS 函数式编程指南</a>》。</li> </ul> <p><strong>缺点：</strong></p> <ul> <li>需要重新学习 api</li> <li>资源包大小增加（源码 5000 行左右）</li> <li>容易与原生对象混淆：由于 api 与原生不同，混用的话容易出错。</li> </ul> <h2>4、使用 Immutable.js</h2> <p><strong>01-get-started</strong></p> <pre><code class="language-js">const { Map } = require('immutable') const map1 = Map({ a: 1, b: 2, c: 3 }) const map2 = map1.set('b', 50) console.log(map1.get('b') + ' vs. ' + map2.get('b')) *// 2 vs. 50*</code></pre> <p><strong>02-case-for-immutability-1.js</strong></p> <pre><code class="language-js">const { Map } = require("immutable"); const map1 = Map({ a: 1, b: 2, c: 3 }); const map2 = Map({ a: 1, b: 2, c: 3 }); console.log(map1.equals(map2)); console.log(map1 == map2); console.log(map1 === map2); // true // false // false</code></pre> <p><strong>02-case-for-immutability-2.js</strong></p> <pre><code class="language-js">const { Map } = require("immutable"); const map1 = Map({ a: 1, b: 2, c: 3 }); const map2 = map1.set("b", 2); console.log(map1.equals(map2)); console.log(map1 == map2); console.log(map1 === map2); // true // true // true</code></pre> <p><strong>02-case-for-immutability-3.js</strong></p> <pre><code class="language-js">const { Map } = require("immutable"); const map = Map({ a: 1, b: 2, c: 3 }); const mapCopy = map; console.log(mapCopy.equals(map)); // true</code></pre> <p><strong>03-JavaScript-first-API-0.js</strong></p> <pre><code class="language-js">const { List } = require("immutable"); const list1 = List([1, 2]); const list2 = list1.push(3, 4, 5); const list3 = list2.unshift(0); const list4 = list1.concat(list2, list3); console.log(list1.size === 2); console.log(list2.size === 5); console.log(list3.size === 6); console.log(list4.size === 13); // true // true // true // true</code></pre> <p><strong>03-JavaScript-first-API-1.js</strong></p> <pre><code class="language-js">const { Map } = require("immutable"); const alpha = Map({ a: 1, b: 2, c: 3, d: 4 }); const upperCase = alpha.map((v, k) => k.toUpperCase()).join(); console.log(upperCase); // A,B,C,D</code></pre> <p><strong>03-JavaScript-first-API-2.js</strong></p> <pre><code class="language-js">const { Map, List } = require("immutable"); const map1 = Map({ a: 1, b: 2, c: 3, d: 4 }); const map2 = Map({ c: 10, a: 20, t: 30 }); const obj = { d: 100, o: 200, g: 300 }; const map3 = map1.merge(map2, obj); console.log(map3); // Map { "a": 20, "b": 2, "c": 10, "d": 100, "t": 30, "o": 200, "g": 300 } const list1 = List([1, 2, 3]); const list2 = List([4, 5, 6]); const array = [7, 8, 9]; const list3 = list1.concat(list2, array); console.log(list3); // List [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]</code></pre> <p><strong>03-JavaScript-first-API-3.js</strong></p> <pre><code class="language-js">const { Seq } = require("immutable"); const myObject = { a: 1, b: 2, c: 3 }; const seq = Seq(myObject).map(v => v * v); const seqToObject = seq.toObject(); console.log(seq, seqToObject); // Seq { "a": 1, "b": 4, "c": 9 } { a: 1, b: 4, c: 9 }</code></pre> <p><strong>03-JavaScript-first-API-4.js</strong></p> <pre><code class="language-js">const { fromJS } = require('immutable') const obj = { 1: 'one' } console.log(Object.keys(obj)) *// [ '1' ]* console.log(obj['1'], obj[1]) *// one one* const map = fromJS(obj) console.log(map.get('1'), map.get(1)) *// one undefined*</code></pre> <p><strong>03-JavaScript-first-API-5.js</strong></p> <pre><code class="language-js">const { Map, List } = require("immutable"); const deep = Map({ a: 1, b: 2, c: List([3, 4, 5]) }); console.log(deep.toObject()); console.log(deep.toArray()); console.log(deep.toJS()); console.log(JSON.stringify(deep)); // { a: 1, b: 2, c: List [ 3, 4, 5 ] } // [ 1, 2, List [ 3, 4, 5 ] ] // { a: 1, b: 2, c: [ 3, 4, 5 ] } // {"a":1,"b":2,"c":[3,4,5]}</code></pre> <p><strong>03-JavaScript-first-API-6.js</strong></p> <pre><code class="language-js">const { Map, List } = require("immutable"); const mapped = Map({ a: 1, b: 2, c: 3 }); console.log(mapped.map(x => x * x)); console.log( mapped.map(function (x) { return x * x; }) ); // Map { "a": 1, "b": 4, "c": 9 } // Map { "a": 1, "b": 4, "c": 9 } const aList = List([1, 2, 3]); const anArray = [0, ...aList, 4, 5]; console.log(anArray); // [ 0, 1, 2, 3, 4, 5 ]</code></pre> <p><strong>04-nested-structures.js</strong></p> <pre><code class="language-js">const { fromJS } = require("immutable"); const nested = fromJS({ a: { b: { c: [3, 4, 5] } } }); console.log(nested); // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ] } } } const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } }); console.log(nested2); // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 6 } } }* console.log(nested2.getIn(["a", "b", "d"])); // 6 const nested3 = nested2.updateIn(["a", "b", "d"], value => value + 1); console.log(nested3); // Map { "a": Map { "b": Map { "c": "List [ 3, 4, 5 ]1", "d": 7 } } } // setIn 和 updateIn 都可以修改深层次的Immutable对象，setIn 直接传值，updateIn 传入回调函数 const nested4 = nested3.updateIn(["a", "b", "c"], list => list.push(6)); console.log(nested4); // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5, 6 ], "d": 7 } } } const nested5 = nested4.setIn(["a", "b", "d"], 90); console.log(nested5); console.log(nested); console.log(nested2); console.log(nested3); console.log(nested4); // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ] } } } // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 6 } } } // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 7 } } } // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5, 6 ], "d": 7 } } }</code></pre> <p><strong>05-Equality-treats-Collections-as-Values-0.js</strong></p> <pre><code class="language-js">const { Map, is } = require("immutable"); const obj1 = { a: 1, b: 2, c: 3 }; const obj2 = { a: 1, b: 2, c: 3 }; console.log(obj1 !== obj2); // true const map1 = Map({ a: 1, b: 2, c: 3 }); const map2 = Map({ a: 1, b: 2, c: 3 }); console.log(map1 !== map2); console.log(map1.equals(map2)); console.log(is(map1, map2)); // true // true // true</code></pre> <p><strong>05-Equality-treats-Collections-as-Values-1.js</strong></p> <pre><code class="language-js">const { Map, Set } = require("immutable"); const map1 = Map({ a: 1, b: 2, c: 3 }); const map2 = Map({ a: 1, b: 2, c: 3 }); const set = Set().add(map1); console.log(set.has(map2)); // true</code></pre> <p><strong>05-Equality-treats-Collections-as-Values-2.js</strong></p> <pre><code class="language-js">const { Map } = require("immutable"); const originalMap = Map({ a: 1, b: 2, c: 3 }); const updatedMap = originalMap.set("b", 2); console.log(updatedMap === originalMap); // true</code></pre> <p><strong>05-Equality-treats-Collections-as-Values-3.js</strong></p> <pre><code class="language-js">const { Map, is } = require("immutable"); const originalMap = Map({ a: 1, b: 2, c: 3 }); const updatedMap = originalMap.set("b", 1000); console.log(updatedMap !== originalMap); // true const anotherUpdatedMap = originalMap.set("b", 1000); console.log(anotherUpdatedMap !== updatedMap); console.log(anotherUpdatedMap.equals(updatedMap)); console.log(is(anotherUpdatedMap, updatedMap)); // true // true // true</code></pre> <p><strong>06-Batching-Mutations.js</strong></p> <pre><code class="language-js">const { List } = require("immutable"); const list1 = List([1, 2, 3]); const list2 = list1.withMutations(function (list) { list.push(4).push(5).push(6); }); console.log(list1.size === 3); console.log(list2.size === 6); // true // true let map2 = map1.withMutations(map => { // 逻辑 map.setIn(["c", "d"], 9); map.set("a", 1); }); let map3 = map1.updateIn(["c", "d"], v => { return 9; }); console.log(map1 === map3);</code></pre> <p><strong>07-Lazy-Seq-0.js</strong></p> <pre><code class="language-js">const { Seq } = require("immutable"); const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8]) .filter(x => { console.log("filter x:" + x); return x % 2 !== 0; }) .map(x => { console.log("map x:" + x); return x * x; }); console.log(oddSquares.get(1)); // filter x:1 // filter x:2 // filter x:3 // map x:3 // 9</code></pre> <p><strong>07-Lazy-Seq-1.js</strong></p> <pre><code class="language-js">const { Seq, Map } = require("immutable"); const map = Map({ a: 1, b: 2, c: 3 }); const lazySeq = Seq(map); const newMap = lazySeq .flip() .map(key => key.toUpperCase()) .flip(); console.log(newMap); // Seq { A: 1, B: 1, C: 1 }</code></pre> <p><strong>07-Lazy-Seq-2.js</strong></p> <pre><code class="language-js">const { Range } = require("immutable"); const aRange = Range(1, Infinity) .skip(1000) .map(n => -n) .filter(n => n % 2 === 0) .take(2) .reduce((r, n) => r * n, 1); console.log(aRange); // 1006008</code></pre> <h2>5、在 redux 中使用 immutable.js</h2> <p><a href="https://redux.js.org/recipes/using-immutablejs-with-redux" target="_blank" rel="nofollow" >redux 官网</a>推荐使用<a href="https://www.npmjs.com/package/redux-immutable" target="_blank" rel="nofollow" >redux-immutable</a>进行 redux 和 immutable 的集成。几个注意点：</p> <p><code>redux</code>中，利用<code>combineReducers</code>来合并多个<code>reduce</code>, <code>redux</code>自带的<code>combineReducers</code>只支持原生 js 形式的，所以需要使用<code>redux-immutable</code>提供的<code>combineReducers</code>来代替</p> <pre><code class="language-js">// 使用redux-immutable提供的combineReducers方法替换redux里的combineReducers import { combineReducers } from "redux-immutable"; import reducerOne from "./reducerOne"; import reducerTwo from "./reducerTwo"; const rootReducer = combineReducers({ reducerOne, reducerTwo, }); export default rootReducer;</code></pre> <p><code>reducer</code>中的<code>initialState</code>也需要初始化成<code>immutable</code>类型, 比如一个 counter 的 reducer</p> <pre><code class="language-js">import { Map } from "immutable"; import ActionTypes from "../actions"; const initialState = Map({ count: 0, }); export default (state = initialState, action) => { switch (action.type) { case ActionTypes.INCREAMENT: return state.set("count", state.get("count") + 1); // 使用set或setIn来更改值, get或者getIn来取值 case ActionTypes.DECREAMENT: return state.set("count", state.get("count") - 1); default: return state; } };</code></pre> <p><code>state</code>成为了<code>immutable</code>类型，<code>connect</code>的<code>mapStateToProp</code>也需要相应的改变</p> <pre><code class="language-js">const mapStateToProps = state => ({ count: state.getIn(["counter", "count"]), // 永远不要在mapStateToProps里使用`toJS`方法，因为它永远返回一个新的对象 });</code></pre> <p>在<code>shouldComponentUpdate</code>里就可以使用<code>immutable.is</code>或者<code>instance.equals</code>来进行数据的对比了。</p> <h1>十七、Lazy 和 Suspense</h1> <h2>1、React.lazy 定义</h2> <p><code>React.lazy</code> 函数能让你像渲染常规组件一样处理动态引入（的组件）。</p> <p>什么意思呢？其实就是懒加载。其原理就是利用<code>es6 import()</code>函数。这个<code>import</code>不是<code>import命令</code>。同样是引入模块，<code>import命令</code>是同步引入模块，而<code>import()</code>函数动态引入。</p> <p>当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成一个文件，当使用到这个文件的时候会这段代码才会被异步加载。</p> <h3>(1) 为什么代码要分割</h3> <p>当你的程序越来越大，代码量越来越多。一个页面上堆积了很多功能，也许有些功能很可能都用不到，但是一样下载加载到页面上，所以这里面肯定有优化空间。就如图片懒加载的理论。</p> <h3>(2) import 函数</h3> <p>javascript</p> <pre><code class="language-js">//import 命令 import { add } from "./math"; console.log(add(16, 26)); //import函数 import("./math").then(math => { console.log(math.add(16, 26)); });</code></pre> <blockquote> <p>动态 <code>import()</code> 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。<a href="http://es6.ruanyifeng.com/#docs/module#import" target="_blank" rel="nofollow" >http://es6.ruanyifeng.com/#docs/module#import</a></p> </blockquote> <h3>(3) import 函数示例</h3> <p>下面是 import 一个示例：</p> <p>在 test 文件夹下新建两个文件</p> <p><img decoding="async" src="./images/1.png" alt="图片1" /></p> <p><strong>图片 1：</strong></p> <p>test.html 代码如下:</p> <pre><code class="language-html"><div id="root">页面无内容</div> <button id="btn">加载js</button> <script> document.getElementById("btn").onclick = function () { import("./test.js").then(d => { d.test(); }); }; </script></code></pre> <p>test.js 代码如下:</p> <pre><code class="language-js">function test() { document.getElementById("root"); root.innerHTML = "页面变的有内容了"; } export { test };</code></pre> <p><img decoding="async" src="./images/2.png" alt="图片2" /></p> <p><strong>图片 2</strong></p> <p>这时候打开 web 服务让页面以 http 的方式访问，<a href="http://192.168.1.2:8080/test.html" target="_blank" rel="nofollow" >http://192.168.1.2:8080/test.html</a></p> <p>我们在 chrome 的开发者工具下的 Network 可以看到只请求了一个页面。</p> <p><img decoding="async" src="./images/3.png" alt="图片3" /></p> <p><strong>图片 3</strong></p> <p>但是当我们点击加载 js，你会发现 test.js 会以动态的方式加入到代码中,同时执行了 test 函数，使页面的内容发生了变化。</p> <p><img decoding="async" src="./images/4.png" alt="图片4" /></p> <p><strong>图片 4</strong></p> <p>在<code>React.lazy</code>和常用的三方包<code>react-loadable</code>，都是使用了这个原理，然后配合 webpack 进行代码打包拆分达到异步加载，这样首屏渲染的速度将大大的提高。</p> <p>由于<code>React.lazy</code>不支持服务端渲染，所以这时候<code>react-loadable</code>就是不错的选择。</p> <h2>2、如何使用 React.lazy</h2> <p>下面示例代码使用 create-react-app 脚手架搭建：</p> <pre><code class="language-jsx">//OtherComponent.js 文件内容 import React from 'react' const OtherComponent = ()=>{ return ( <div> 我已加载 </div> ) } export default OtherComponent // App.js 文件内容 import React from 'react'; import './App.css'; //使用React.lazy导入OtherComponent组件 const OtherComponent = React.lazy(() => import('./OtherComponent')); function App() { return ( <div className="App"> <OtherComponent/> </div> ); } export default App;</code></pre> <p>这是最简单的<code>React.lazy</code>，但是这样页面会报错。这个报错提示我们，在 React 使用了<code>lazy</code>之后，会存在一个加载中的空档期，React 不知道在这个空档期中该显示什么内容，所以需要我们指定。接下来就要使用到<code>Suspense</code>。</p> <p><img decoding="async" src="./images/5.png" alt="图片5" /></p> <p><strong>图片 5</strong></p> <h3>(1) Suspense</h3> <p>如果在 <code>App</code> 渲染完成后，包含 <code>OtherComponent</code> 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 <code>Suspense</code> 组件来解决。</p> <p>这里将<code>App</code>组件改一改</p> <pre><code class="language-jsx">import React, { Suspense, Component } from "react"; import "./App.css"; //使用React.lazy导入OtherComponent组件 const OtherComponent = React.lazy(() => import("./OtherComponent")); export default class App extends Component { state = { visible: false, }; render() { return ( <div className="App"> <button onClick={() => { this.setState({ visible: true }); }} > 加载OtherComponent组件 </button> <Suspense fallback={<div>Loading...</div>}>{this.state.visible ? <OtherComponent /> : null}</Suspense> </div> ); } }</code></pre> <p>我们指定了空档期使用 Loading 展示在界面上面，等<code>OtherComponent</code>组件异步加载完毕，把<code>OtherComponent</code>组件的内容替换掉 Loading 上。</p> <p><img decoding="async" src="./images/6.gif" alt="图片6" /></p> <p><strong>图片 6</strong></p> <p><img decoding="async" src="./images/7.png" alt="图片7" /></p> <p><strong>图片 7</strong></p> <p>为了演示我把 chrome 网络调到<code>lower-end mobile</code>，不然看不到 loading 出现。</p> <p>可以从上面图片看出，当点击加载的时候,页面的 head 会插入<code><code>这段代码，发出一个get请求，页面开始显示loading，去请求</code>2.chunk.js</code>文件。</p> <p>请求结束返回内容就是<code>OtherComponent</code>组件的内容,只是文件名称和文件内容经过 webpack 处理过。</p> <blockquote> <p>注意：<code>Suspense</code>使用的时候，<code>fallback</code>一定是存在且有内容的， 否则会报错。</p> </blockquote> <h1>十八、React Hooks</h1> <h2>0、前言</h2> <p>React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案，不会产生 JSX 嵌套地狱问题。</p> <h3>(1) 状态逻辑复用</h3> <p>一般来说，组件是 UI 和逻辑，但是逻辑这一层面却很难复用。对用户而言，组件就像一个黑盒，我们应该拿来即用。但当组件的样式或者结构不满足需求的时候，我们只能去重新实现这个组件。</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhYUmcwcmxTRXM4R2VqNzdEU2toUmRpY01rdkphMHRBS2E0QnhlTEtkczh4QnVKcUxuRlBNdG1nLzY0MA?x-oss-process=image/format,png" alt="img" /></p> <p>在我们开发 React 应用的时候，经常会遇到类似下面这种场景，你可能会有两个疑问：</p> <ol> <li> <p>Loading 是否可以复用？</p> </li> <li> <p>Loading 该怎么复用？</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhRSFIwbElJMHNpYjVZTGliQ2lhb1hNSlB0ZmppY0dBQjJWNzJ2SVJwQ1F3Tkc0WjZDenM2MWNQZ2FBLzY0MA?x-oss-process=image/format,png" alt="img" /></p> </li> </ol> <p>这几个例子都指向了同一个问题，那就是如何实现组件的逻辑复用？</p> <h3>(2) render props</h3> <p>将函数作为 props 传给父组件，父组件中的状态共享，通过参数传给函数，实现渲染，这就是 <code>render props</code>。使用 <code>render prop</code> 的库有 React Router、Downshift 以及 Formik。以下面这个 Toggle 组件为例子，我们一般可以这样用：</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhUSHkyTW9XbW5TMlhOZG5JWkFjTUFCY0dyWWJBR3J2dkoxS3JlNjV5c2R0bmN4M3UxRVFUbEEvNjQw?x-oss-process=image/format,png" alt="img" /></p> <p>可以看到，控制 Modal 组件是否展示的状态被提取到了 Toggle 组件中，这个 Toggle 组件还可以拿来多次复用到其他组件里面。那么这个 Toggle 是怎么实现的呢？看到实现后你就会理解 <code>render props</code> 的原理</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhMeUNrcW42VFJsZTF5cldBeWVabldBTmlhNE9QT2tsT05laWNGWmdtQkVRdEI3czFkQklaNlZHZy82NDA?x-oss-process=image/format,png" alt="img" /></p> <p>关于 <code>render props</code> 的更多内容可以参考 React 中文网的相关章节：Render Props</p> <h3>(3) higher-order components</h3> <p>higher-order components 一般简称 hoc，中文翻译为高阶组件。从名字上就可以看出来，高阶组件肯定和高阶函数有什么千丝万缕的关系。高阶组件的本质是一个高阶函数，它接收一个组件，返回一个新的组件。在这个新的组件中的状态共享，通过 props 传给原来的组件。以刚刚那个 Toggle 组件为例子，高阶组件同样可以被多次复用，常常可以配合装饰器一起使用。</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhZZmliSzB2c1RWUlpoZHYxSTNpYmdzQ2J1TXVqYWNialBubkt6Z1ozRlZJb2xxWDNqZUsxUnhIQS82NDA?x-oss-process=image/format,png" alt="img" /></p> <p>高阶组件的实现和 <code>render props</code> 也不太一样，主要是一个高阶函数。</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGh6dXBpYzFrT1dTSnZSU1ZXVlNlaGtjY1Y5VFdyVUxneVF0blNwbkZjZ2dwaWFvQW5UNTM1UjRtdy82NDA?x-oss-process=image/format,png" alt="img" /></p> <h3>(4) render props 和高阶组件的弊端</h3> <p>不管是 render props 还是高阶组件，他们要做的都是实现状态逻辑的复用，可这俩是完美的解决方案吗？考虑一下，如果我们依赖了多个需要复用的状态逻辑的时候，该怎么写呢？以 render props 为例：</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhERU96cXp3RGE4NzNvUFoxS2ZLbnRiVEN5TzBjTnJYNzZMSFpjZ05pYTZiWGlhcjltNUN6d24xdy82NDA?x-oss-process=image/format,png" alt="img" /></p> <p>看看这个代码，你有没有一种似曾相识的感觉？这一天，我们终于想起被“回调地狱”支配的恐惧。不得不再次祭出这张图了。</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhoczk2ZU5vQ0JCVXQzbEFFWXl5ZHVVOExSWXNpY0FaZ2RvUGVJcm9qZ1U1YXE3QXBjRVFXdEVnLzY0MA?x-oss-process=image/format,png" alt="img" /></p> <h3>(5) React Hooks</h3> <p>React Hooks 则可以完美解决上面的嵌套问题，它拥有下面这几个特性。</p> <ol> <li>多个状态不会产生嵌套，写法还是平铺的</li> <li>允许函数组件使用 state 和部分生命周期</li> <li>更容易将组件的 UI 与状态分离</li> </ol> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhRdzNNYXZMQzBMTzlSYU4yOWpNMWdpYnNXbWliMERmRE13eVhpYzhGUnl6dmJNSlQ4cHN0YVY2eGcvNjQw?x-oss-process=image/format,png" alt="img" /></p> <p>上面是一个结合了 useState 和 useEffect 两个 hook 方法的例子，主要是在 resize 事件触发时获取到当前的 <code>window.innerWidth</code>。这个 useWindowWidth 方法可以拿来在多个地方使用。常用的 Hook 方法如下：</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhtaWFLWU1mSk9lekxqYmNiOWQ4YU5jTDhpYmN2dTB1M1Jud1poWEYyd3JqaWJEZFIwc3VsUEVsRGcvNjQw?x-oss-process=image/format,png" alt="img" /></p> <p>在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处：</p> <ol> <li>代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护</li> <li>组件树层级变浅，在原本的代码中，我们经常使用 HOC/render props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现</li> </ol> <h2>1、useState 保存组件状态</h2> <p>在类组件中，我们使用 <code>this.state</code> 来保存组件状态，并对其修改触发组件重新渲染。比如下面这个简单的计数器组件，很好诠释了类组件如何运行：</p> <pre><code class="language-source-js">import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, name: "alife" }; } render() { const { count } = this.state; return ( <div> Count: {count} <button onClick={() => this.setState({ count: count + 1 })}>+</button> <button onClick={() => this.setState({ count: count - 1 })}>-</button> </div> ); } }</code></pre> <p>一个简单的计数器组件就完成了，而在函数组件中，由于没有 this 这个黑魔法，React 通过 useState 来帮我们保存组件的状态。</p> <pre><code class="language-source-js">import React, { useState } from "react"; function App() { const [obj, setObject] = useState({ count: 0, name: "alife" }); return ( <div className="App"> Count: {obj.count} <button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button> <button onClick={() => setObject({ ...obj, count: obj.count - 1 })}>-</button> </div> ); }</code></pre> <p>通过传入 useState 参数后返回一个带有默认状态和改变状态函数的数组。通过传入新状态给函数来改变原本的状态值。<strong>值得注意的是 useState 不帮助你处理状态，相较于 setState 非覆盖式更新状态，useState 覆盖式更新状态，需要开发者自己处理逻辑。(代码如上)</strong></p> <p>似乎有个 useState 后，函数组件也可以拥有自己的状态了，但仅仅是这样完全不够。</p> <h2>2、useEffect 处理副作用</h2> <p>函数组件能保存状态，但是对于异步请求，副作用的操作还是无能为力，所以 React 提供了 useEffect 来帮助开发者处理函数组件的副作用，在介绍新 API 之前，我们先来看看类组件是怎么做的：</p> <pre><code class="language-source-js">import React, { Component } from "react"; class App extends Component { state = { count: 1 }; componentDidMount() { const { count } = this.state; document.title = "componentDidMount" + count; this.timer = setInterval(() => { this.setState(({ count }) => ({ count: count + 1 })); }, 1000); } componentDidUpdate() { const { count } = this.state; document.title = "componentDidMount" + count; } componentWillUnmount() { document.title = "componentWillUnmount"; clearInterval(this.timer); } render() { const { count } = this.state; return ( <div> Count:{count} <button onClick={() => clearInterval(this.timer)}>clear</button> </div> ); } }</code></pre> <p>在例子中，组件每隔一秒更新组件状态，并且每次触发更新都会触发 document.title 的更新(副作用)，而在组件卸载时修改 document.title（类似于清除）</p> <p>从例子中可以看到，一些重复的功能开发者需要在 componentDidMount 和 componentDidUpdate 重复编写，而如果使用 useEffect 则完全不一样。</p> <pre><code class="language-source-js">import React, { useState, useEffect } from "react"; let timer = null; function App() { const [count, setCount] = useState(0); useEffect(() => { document.title = "componentDidMount" + count; },[count]); useEffect(() => { timer = setInterval(() => { setCount(prevCount => prevCount + 1); }, 1000); // 一定注意下这个顺序： // 告诉react在下次重新渲染组件之后，同时是下次执行上面setInterval之前调用 return () => { document.title = "componentWillUnmount"; clearInterval(timer); }; }, []); return ( <div> Count: {count} <button onClick={() => clearInterval(timer)}>clear</button> </div> ); }</code></pre> <p>我们使用 useEffect 重写了上面的例子，<strong>useEffect 第一个参数接收一个函数，可以用来做一些副作用比如异步请求，修改外部参数等行为，而第二个参数称之为 dependencies，是一个数组，如果数组中的值变化才会触发 执行 useEffect 第一个参数中的函数。返回值(如果有)则在组件销毁或者调用函数前调用</strong>。</p> <ul> <li>1.比如第一个 useEffect 中，理解起来就是一旦 count 值发生改变，则修改 documen.title 值；</li> <li>2.而第二个 useEffect 中传递了一个空数组[]，这种情况下只有在组件初始化或销毁的时候才会触发，用来代替 componentDidMount 和 componentWillUnmount，慎用；</li> <li> <ol> <li>还有另外一个情况，就是不传递第二个参数，也就是 useEffect 只接收了第一个函数参数，代表不监听任何参数变化。每次渲染 DOM 之后，都会执行 useEffect 中的函数。</li> </ol> </li> </ul> <p>基于这个强大 Hooks，我们可以模拟封装出其他生命周期函数，比如 componentDidUpdate 代码十分简单</p> <pre><code class="language-source-js">function useUpdate(fn) { // useRef 创建一个引用 const mounting = useRef(true); useEffect(() => { if (mounting.current) { mounting.current = false; } else { fn(); } }); }</code></pre> <p>现在我们有了 useState 管理状态，useEffect 处理副作用，异步逻辑，学会这两招足以应对大部分类组件的使用场景。</p> <h2>3、useContext 减少组件层级</h2> <p>上面介绍了 useState、useEffect 这两个最基本的 API，接下来介绍的 useContext 是 React 帮你封装好的，用来处理多层级传递数据的方式，在以前组件树种，跨层级祖先组件想要给孙子组件传递数据的时候，除了一层层 props 往下透传之外，我们还可以使用 React Context API 来帮我们做这件事，举个简单的例子：</p> <pre><code class="language-source-js">const { Provider, Consumer } = React.createContext(null); function Bar() { return <Consumer>{color => <div>{color}</div>}</Consumer>; } function Foo() { return <Bar />; } function App() { return ( <Provider value={"grey"}> <Foo /> </Provider> ); }</code></pre> <p>通过 React createContext 的语法，在 APP 组件中可以跨过 Foo 组件给 Bar 传递数据。而在 React Hooks 中，我们可以使用 useContext 进行改造。</p> <pre><code class="language-source-js">const colorContext = React.createContext("gray"); function Bar() { const color = useContext(colorContext); return <div>{color}</div>; } function Foo() { return <Bar />; } function App() { return ( <colorContext.Provider value={"red"}> <Foo /> </colorContext.Provider> ); }</code></pre> <p>传递给 useContext 的是 context 而不是 consumer，返回值即是想要透传的数据了。用法很简单，使用 useContext 可以解决 Consumer 多状态嵌套的问题。</p> <pre><code class="language-source-js">function HeaderBar() { return ( <CurrentUser.Consumer> {user => <Notifications.Consumer> {notifications => <header> Welcome back, {user.name}! You have {notifications.length} notifications. </header> } } </CurrentUser.Consumer> ); }</code></pre> <p>而使用 useContext 则变得十分简洁，可读性更强且不会增加组件树深度。</p> <pre><code class="language-source-js">function HeaderBar() { const user = useContext(CurrentUser); const notifications = useContext(Notifications); return ( <header> Welcome back, {user.name}! You have {notifications.length} notifications. </header> ); }</code></pre> <h2>4、useReducer</h2> <p>useReducer 这个 Hooks 在使用上几乎跟 Redux/React-Redux 一模一样，唯一缺少的就是无法使用 redux 提供的中间件。我们将上述的计时器组件改写为 useReducer，</p> <pre><code class="language-source-js">import React, { useReducer } from "react"; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + action.payload }; case "decrement": return { count: state.count - action.payload }; default: throw new Error(); } } function App() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: "increment", payload: 5 })}> + </button> <button onClick={() => dispatch({ type: "decrement", payload: 5 })}> - </button> </> ); }</code></pre> <p>用法跟 Redux 基本上是一致的，用法也很简单，算是提供一个 mini 的 Redux 版本。</p> <h2>5、useCallback 记忆函数</h2> <p>在类组件中，我们经常犯下面这样的错误：</p> <pre><code class="language-source-js">class App { render() { return <div> <SomeComponent style={{ fontSize: 14 }} doSomething={ () => { console.log('do something'); }} /> </div>; } }</code></pre> <p>这样写有什么坏处呢？一旦 App 组件的 props 或者状态改变了就会触发重渲染，即使跟 SomeComponent 组件不相关，<strong>由于每次 render 都会产生新的 style 和 doSomething（因为重新 render 前后， style 和 doSomething 分别指向了不同的引用）</strong>，所以会导致 SomeComponent 重新渲染，倘若 SomeComponent 是一个大型的组件树，这样的 Virtual Dom 的比较显然是很浪费的，解决的办法也很简单，将参数抽离成变量。</p> <pre><code class="language-source-js">const fontSizeStyle = { fontSize: 14 }; class App { doSomething = () => { console.log('do something'); } render() { return <div> <SomeComponent style={fontSizeStyle} doSomething={ this.doSomething } /> </div>; } }</code></pre> <p>在类组件中，我们还可以通过 this 这个对象来存储函数，而在函数组件中没办法进行挂载了。所以函数组件在每次渲染的时候如果有传递函数的话都会重渲染子组件。</p> <pre><code class="language-source-js">function App() { const handleClick = () => { console.log('Click happened'); } return <SomeComponent onClick={handleClick}>Click Me</SomeComponent>; }</code></pre> <blockquote> <p>这里多说一句，一般把<strong>函数式组件理解为 class 组件 render 函数的语法糖</strong>，所以每次重新渲染的时候，函数式组件内部所有的代码都会重新执行一遍。所以上述代码中每次 render，handleClick 都会是一个新的引用，所以也就是说传递给 SomeComponent 组件的 props.onClick 一直在变(因为每次都是一个新的引用)，所以才会说这种情况下，函数组件在每次渲染的时候如果有传递函数的话都会重渲染子组件。</p> </blockquote> <p>而有了 useCallback 就不一样了，你可以通过 useCallback 获得一个记忆后的函数。</p> <pre><code class="language-source-js">function App() { const memoizedHandleClick = useCallback(() => { console.log('Click happened') }, []); // 空数组代表无论什么情况下该函数都不会发生改变 return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>; }</code></pre> <p>老规矩，第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。</p> <p>这样只要子组件继承了 PureComponent 或者使用 React.memo 就可以有效避免不必要的 VDOM 渲染。</p> <h2>6、useMemo 计算属性</h2> <p>useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。</p> <pre><code class="language-rust">const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);</code></pre> <p>返回一个 <a href="https://en.wikipedia.org/wiki/Memoization" target="_blank" rel="nofollow" >memoized</a> 值。</p> <p>把“创建”函数和依赖项数组作为参数传入 <code>useMemo</code>，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。</p> <p>记住，传入 <code>useMemo</code> 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 <code>useEffect</code> 的适用范畴，而不是 <code>useMemo</code>。</p> <p>如果没有提供依赖项数组，<code>useMemo</code> 在每次渲染时都会计算新的值。</p> <p><strong>你可以把 <code>useMemo</code> 作为性能优化的手段，但不要把它当成语义上的保证。</strong>将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 <code>useMemo</code> 的情况下也可以执行的代码 —— 之后再在你的代码中添加 <code>useMemo</code>，以达到优化性能的目的。</p> <blockquote> <p>注意</p> <p>依赖项数组不会作为参数传给“创建”函数。虽然从概念上来说它表现为：所有“创建”函数中引用的值都应该出现在依赖项数组中。未来编译器会更加智能，届时自动创建数组将成为可能。</p> <p>我们推荐启用 <a href="https://www.npmjs.com/package/eslint-plugin-react-hooks#installation" target="_blank" rel="nofollow" ><code>eslint-plugin-react-hooks</code></a> 中的 <a href="https://github.com/facebook/react/issues/14920" target="_blank" rel="nofollow" ><code>exhaustive-deps</code></a> 规则。此规则会在添加错误依赖时发出警告并给出修复建议。</p> </blockquote> <pre><code>let child = useMemo(() => { return ( <Child title={title}></Child> ) }, [title])</code></pre> <p>如上例，Child 是通过<code>useMemo</code>计算属性返回的新的值，这个值是 Child 组件的一个实例。原则上，这个返回值可以是任意计算以后的值，也就是实现了一个计算属性的功能。</p> <h2>7、useRef 保存引用值</h2> <p>useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用，看个简单的例子：</p> <pre><code class="language-source-js">import React, { useState, useRef } from "react"; function App() { let [name, setName] = useState("Nate"); let nameRef = useRef(); const submitButton = () => { setName(nameRef.current.value); }; return ( <div className="App"> <p>{name}</p> <div> <input ref={nameRef} type="text" /> <button type="button" onClick={submitButton}> Submit </button> </div> </div> ); }</code></pre> <p>useRef 返回的值传递给组件或者 DOM 的 ref 属性，就可以通过 ref.current 值<strong>访问组件或真实的 DOM 节点，重点是组件也是可以访问到的</strong>，从而可以对 DOM 进行一些操作，比如监听事件等等。</p> <p>当然 useRef 远比你想象中的功能更加强大，useRef 的功能有点像类属性，或者说您想要在组件中记录一些值，并且这些值在稍后可以更改。</p> <p>利用 useRef 就可以绕过 Capture Value 的特性。可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。</p> <p>React Hooks 中存在 Capture Value 的特性：</p> <pre><code class="language-source-js">function App() { const [count, setCount] = useState(0); useEffect(() => { setTimeout(() => { alert("count: " + count); }, 3000); }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>增加 count</button> <button onClick={() => setCount(count - 1)}>减少 count</button> </div> ); }</code></pre> <p>先点击增加 button，后点击减少 button，3 秒后先 alert 1，后 alert 0，而不是 alert 两次 0。这就是所谓的 capture value 的特性。而在<strong>类组件</strong>中 3 秒后输出的就是修改后的值，因为这时候 <strong>message 是挂载在 this 变量上，它保留的是一个引用值</strong>，对 this 属性的访问都会获取到最新的值。讲到这里你应该就明白了，useRef 创建一个引用，就可以有效规避 React Hooks 中 Capture Value 特性。</p> <pre><code class="language-source-js">function App() { const count = useRef(0); const showCount = () => { alert("count: " + count.current); }; const handleClick = number => { count.current = count.current + number; setTimeout(showCount, 3000); }; return ( <div> <p>You clicked {count.current} times</p> <button onClick={() => handleClick(1)}>增加 count</button> <button onClick={() => handleClick(-1)}>减少 count</button> </div> ); }</code></pre> <p>只要将赋值与取值的对象变成 useRef，而不是 useState，就可以躲过 capture value 特性，在 3 秒后得到最新的值。</p> <h2>8、useImperativeHandle 透传 Ref</h2> <p>通过 useImperativeHandle 用于让父组件获取子组件内的索引</p> <pre><code class="language-source-js">import React, { useRef, useEffect, useImperativeHandle, forwardRef } from "react"; function ChildInputComponent(props, ref) { const inputRef = useRef(null); useImperativeHandle(ref, () => inputRef.current); return <input type="text" name="child input" ref={inputRef} />; } const ChildInput = forwardRef(ChildInputComponent); function App() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return ( <div> <ChildInput ref={inputRef} /> </div> ); }</code></pre> <p>通过这种方式，App 组件可以获得子组件的 input 的 DOM 节点。</p> <h2>9、useLayoutEffect 同步执行副作用</h2> <p>useLayoutEffect 也是一个 Hook 方法，从名字上看和 useEffect 差不多，他俩用法也比较像。在 90%的场景下我们都会用 useEffect，然而在某些场景下却不得不用 useLayoutEffect。useEffect 和 useLayoutEffect 的区别是：</p> <ol> <li>useEffect 不会 block 浏览器渲染，而 useLayoutEffect 会。</li> <li>useEffect 会在浏览器渲染结束后执行，useLayoutEffect 则是在 DOM 更新完成后，浏览器绘制之前执行。</li> </ol> <p>这两句话该怎么来理解呢？我们以一个移动的方块为例子：</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhEWUNoSHFrOGhjZXFGczlLc3U1UW5iUU1mVFIzTnJBVFJpYkdOb2lhWkgzR0NtMllsTkNxZlpqUS82NDA?x-oss-process=image/format,png" alt="img" /></p> <p>在 useEffect 里面会让这个方块往后移动 600px 距离，可以看到这个方块在移动过程中会闪一下。但如果换成了 useLayoutEffect 呢？会发现方块不会再闪动，而是直接出现在了 600px 的位置。</p> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhLTG9aWHlWNXlCRVNTZGI0ZFdWY1VKalU5Q2NHTkhiUUtSNnpGcVdBOWxhMWFUUm9pYVlDNFZnLzY0MA?x-oss-process=image/format,png" alt="img" /></p> <pre><code class="language-js">import React, { useEffect, useRef, useLayoutEffect } from "react"; const moveTo = (dom, delay, option) => { dom.style.transform = `translate(${option.x}px)`; dom.style.transition = `all ${delay}ms ease-in`; }; export default function UseLayoutEffectTest() { const divRef = useRef(null); useEffect(() => { moveTo(divRef.current, 500, { x: 100 }); }, []); return ( <div> <div ref={divRef} style={{ width: "100px", height: "100px", backgroundColor: "red" }}> 方块 </div> </div> ); }</code></pre> <p><img decoding="async" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi96ZXdyTGtyWWZzTVhOWllhWERFa3h1WENUMWliQVdibGhla2liaWJURUwzdXdpYXRXMUhSOHhYa3lBT3d3UXpVNTAyOWxZYmFuOVdBVnp3TEdnV2hGVXBPa0EvNjQw?x-oss-process=image/format,png" alt="img" /></p> <p>原因是 useEffect 是在浏览器绘制之后执行的，所以方块一开始就在最左边，于是我们看到了方块移动的动画。然而 useLayoutEffect 是在绘制之前执行的，会阻塞页面的绘制，所以页面会在 useLayoutEffect 里面的代码执行结束后才去继续绘制，于是方块就直接出现在了右边。</p> <h2>10、自定义 Hooks</h2> <p><strong>定义 hooks</strong></p> <pre><code class="language-js">function useProvideAuth() { const [user, setUser] = useState(null); const signin = cb => { return fakeAuth.signin(() => { setUser("user"); cb(); }); }; const signout = cb => { return fakeAuth.signout(() => { setUser(null); cb(); }); }; return { user, signin, signout, }; }</code></pre> <p><strong>引用 hooks</strong></p> <pre><code>const auth = useProvideAuth()</code></pre> <h2>11、如何用对 React Hooks</h2> <h3>问题一：我该使用单个 state 变量还是多个 state 变量？</h3> <p><code>useState</code> 的出现，让我们可以使用多个 state 变量来保存 state，比如：</p> <pre><code>const [width, setWidth] = useState(100); const [height, setHeight] = useState(100); const [left, setLeft] = useState(0); const [top, setTop] = useState(0);</code></pre> <p>但同时，我们也可以像 Class 组件的 <code>this.state</code> 一样，将所有的 state 放到一个 <code>object</code> 中，这样只需一个 state 变量即可：</p> <pre><code>const [state, setState] = useState({ width: 100, height: 100, left: 0, top: 0 });</code></pre> <p>那么问题来了，到底该用单个 state 变量还是多个 state 变量呢？</p> <p>如果使用单个 state 变量，每次更新 state 时需要合并之前的 state。因为 <code>useState</code> 返回的 <code>setState</code> 会替换原来的值。这一点和 Class 组件的 <code>this.setState</code> 不同。<code>this.setState</code> 会把更新的字段自动合并到 <code>this.state</code> 对象中。</p> <pre><code>const handleMouseMove = (e) => { setState((prevState) => ({ ...prevState, left: e.pageX, top: e.pageY, })) };</code></pre> <p>使用多个 state 变量可以让 state 的粒度更细，更易于逻辑的拆分和组合。比如，我们可以将关联的逻辑提取到自定义 Hook 中：</p> <pre><code>function usePosition() { const [left, setLeft] = useState(0); const [top, setTop] = useState(0); useEffect(() => { // ... }, []); return [left, top, setLeft, setTop]; }</code></pre> <p>我们发现，每次更新 <code>left</code> 时 <code>top</code> 也会随之更新。因此，把 <code>top</code> 和 <code>left</code> 拆分为两个 state 变量显得有点多余。</p> <p>在使用 state 之前，我们需要考虑状态拆分的「粒度」问题。如果粒度过细，代码就会变得比较冗余。如果粒度过粗，代码的可复用性就会降低。那么，到底哪些 state 应该合并，哪些 state 应该拆分呢？我总结了下面两点：</p> <blockquote> <ol> <li>将完全不相关的 state 拆分为多组 state。比如 <code>size</code> 和 <code>position</code>。</li> <li>如果某些 state 是相互关联的，或者需要一起发生改变，就可以把它们合并为一组 state。比如 <code>left</code> 和 <code>top</code>。</li> </ol> </blockquote> <pre><code>function Box() { const [position, setPosition] = usePosition(); const [size, setSize] = useState({width: 100, height: 100}); // ... } function usePosition() { const [position, setPosition] = useState({left: 0, top: 0}); useEffect(() => { // ... }, []); return [position, setPosition]; }</code></pre> <h3>问题二：deps 依赖过多，导致 Hooks 难以维护？</h3> <p>使用 <code>useEffect</code> hook 时，为了避免每次 render 都去执行它的 callback，我们通常会传入第二个参数「dependency array」（下面统称为依赖数组）。这样，只有当依赖数组发生变化时，才会执行 <code>useEffect</code> 的回调函数。</p> <pre><code>function Example({id, name}) { useEffect(() => { console.log(id, name); }, [id, name]); }</code></pre> <p>在上面的例子中，只有当 <code>id</code> 或 <code>name</code> 发生变化时，才会打印日志。依赖数组中必须包含在 callback 内部用到的所有参与 React 数据流的值，比如 <code>state</code>、<code>props</code> 以及它们的衍生物。如果有遗漏，可能会造成 bug。这其实就是 JS 闭包问题，对闭包不清楚的同学可以自行 google，这里就不展开了。</p> <pre><code>function Example({id, name}) { useEffect(() => { // 由于依赖数组中不包含 name，所以当 name 发生变化时，无法打印日志 console.log(id, name); }, [id]); }</code></pre> <p>在 React 中，除了 useEffect 外，接收依赖数组作为参数的 Hook 还有 <code>useMemo</code>、<code>useCallback</code> 和 <code>useImperativeHandle</code>。我们刚刚也提到了，依赖数组中千万不要遗漏回调函数内部依赖的值。但是，如果依赖数组依赖了过多东西，可能导致代码难以维护。我在项目中就看到了这样一段代码：</p> <pre><code>const refresh = useCallback(() => { // ... }, [name, searchState, address, status, personA, personB, progress, page, size]);</code></pre> <p>不要说内部逻辑了，光是看到这一堆依赖就令人头大！如果项目中到处都是这样的代码，可想而知维护起来多么痛苦。如何才能避免写出这样的代码呢？</p> <p>首先，你需要重新思考一下，这些 deps 是否真的都需要？看下面这个例子：</p> <pre><code>function Example({id}) { const requestParams = useRef({}); requestParams.current = {page: 1, size: 20, id}; const refresh = useCallback(() => { doRefresh(requestParams.current); }, []); useEffect(() => { id && refresh(); }, [id, refresh]); // 思考这里的 deps list 是否合理？ }</code></pre> <p>虽然 <code>useEffect</code> 的回调函数依赖了 <code>id</code> 和 <code>refresh</code> 方法，但是观察 <code>refresh</code> 方法可以发现，它在首次 render 被创建之后，永远不会发生改变了。因此，把它作为 <code>useEffect</code> 的 deps 是多余的。</p> <p>其次，如果这些依赖真的都是需要的，那么这些逻辑是否应该放到同一个 hook 中？</p> <pre><code>function Example({id, name, address, status, personA, personB, progress}) { const [page, setPage] = useState(); const [size, setSize] = useState(); const doSearch = useCallback(() => { // ... }, []); const doRefresh = useCallback(() => { // ... }, []); useEffect(() => { id && doSearch({name, address, status, personA, personB, progress}); page && doRefresh({name, page, size}); }, [id, name, address, status, personA, personB, progress, page, size]); }</code></pre> <p>可以看出，在 <code>useEffect</code> 中有两段逻辑，这两段逻辑是相互独立的，因此我们可以将这两段逻辑放到不同 <code>useEffect</code> 中：</p> <pre><code>useEffect(() => { id && doSearch({name, address, status, personA, personB, progress}); }, [id, name, address, status, personA, personB, progress]); useEffect(() => { page && doRefresh({name, page, size}); }, [name, page, size]);</code></pre> <p>如果逻辑无法继续拆分，但是依赖数组还是依赖了过多东西，该怎么办呢？就比如我们上面的代码：</p> <pre><code>useEffect(() => { id && doSearch({name, address, status, personA, personB, progress}); }, [id, name, address, status, personA, personB, progress]);</code></pre> <p>这段代码中的 <code>useEffect</code> 依赖了七个值，还是偏多了。仔细观察上面的代码，可以发现这些值都是「过滤条件」的一部分，通过这些条件可以过滤页面上的数据。因此，我们可以将它们看做一个整体，也就是我们前面讲过的合并 state：</p> <pre><code>const [filters, setFilters] = useState({ name: "", address: "", status: "", personA: "", personB: "", progress: "" }); useEffect(() => { id && doSearch(filters); }, [id, filters]);</code></pre> <p>如果 state 不能合并，在 callback 内部又使用了 <code>setState</code> 方法，那么可以考虑使用 <code>setState</code> callback 来减少一些依赖。比如：</p> <pre><code>const useValues = () => { const [values, setValues] = useState({ data: {}, count: 0 }); const [updateData] = useCallback( (nextData) => { setValues({ data: nextData, count: values.count + 1 // 因为 callback 内部依赖了外部的 values 变量，所以必须在依赖数组中指定它 }); }, [values], ); return [values, updateData]; };</code></pre> <p>上面的代码中，我们必须在 <code>useCallback</code> 的依赖数组中指定 <code>values</code>，否则我们无法在 callback 中获取到最新的 <code>values</code> 状态。但是，通过 <code>setState</code> 回调函数，我们不用再依赖外部的 <code>values</code> 变量，因此也无需在依赖数组中指定它。就像下面这样：</p> <pre><code>const useValues = () => { const [values, setValues] = useState({}); const [updateData] = useCallback((nextData) => { setValues((prevValues) => ({ data: nextData, count: prevValues.count + 1, // 通过 setState 回调函数获取最新的 values 状态，这时 callback 不再依赖于外部的 values 变量了，因此依赖数组中不需要指定任何值 })); }, []); // 这个 callback 永远不会重新创建 return [values, updateData]; };</code></pre> <p>最后，还可以通过 <code>ref</code> 来保存可变变量。以前我们只把 <code>ref</code> 用作保持 DOM 节点引用的工具，可 <code>useRef</code> Hook 能做的事情远不止如此。我们可以用它来保存一些值的引用，并对它进行读写。举个例子：</p> <pre><code>const useValues = () => { const [values, setValues] = useState({}); const latestValues = useRef(values); latestValues.current = values; const [updateData] = useCallback((nextData) => { setValues({ data: nextData, count: latestValues.current.count + 1, }); }, []); return [values, updateData]; };</code></pre> <p>在使用 <code>ref</code> 时要特别小心，因为它可以随意赋值，所以一定要控制好修改它的方法。特别是一些底层模块，在封装的时候千万不要直接暴露 <code>ref</code>，而是提供一些修改它的方法。</p> <p>说了这么多，归根到底都是为了写出更加清晰、易于维护的代码。如果发现依赖数组依赖过多，我们就需要重新审视自己的代码。</p> <blockquote> <ul> <li>依赖数组依赖的值最好不要超过 3 个，否则会导致代码会难以维护。</li> <li>如果发现依赖数组依赖的值过多，我们应该采取一些方法来减少它。 <ul> <li>去掉不必要的依赖。</li> <li>将 Hook 拆分为更小的单元，每个 Hook 依赖于各自的依赖数组。</li> <li>通过合并相关的 state，将多个依赖值聚合为一个。</li> <li>通过 <code>setState</code> 回调函数获取最新的 state，以减少外部依赖。</li> <li>通过 <code>ref</code> 来读取可变变量的值，不过需要注意控制修改它的途径。</li> </ul> </li> </ul> </blockquote> <h3>问题三：该不该使用 <code>useMemo</code>？</h3> <p>该不该使用 <code>useMemo</code>？对于这个问题，有的人从来没有思考过，有的人甚至不觉得这是个问题。不管什么情况，只要用 <code>useMemo</code> 或者 <code>useCallback</code> 「包裹一下」，似乎就能使应用远离性能的问题。但真的是这样吗？有的时候 <code>useMemo</code> 没有任何作用，甚至还会影响应用的性能。</p> <p>为什么这么说呢？首先，我们需要知道 <code>useMemo </code>本身也有开销。<code>useMemo</code> 会「记住」一些值，同时在后续 render 时，将依赖数组中的值取出来和上一次记录的值进行比较，如果不相等才会重新执行回调函数，否则直接返回「记住」的值。这个过程本身就会消耗一定的内存和计算资源。因此，过度使用 <code>useMemo</code> 可能会影响程序的性能。</p> <p>要想合理使用 <code>useMemo</code>，我们需要搞清楚 <code>useMemo</code> 适用的场景：</p> <ul> <li>有些计算开销很大，我们就需要「记住」它的返回值，避免每次 render 都去重新计算。</li> <li>由于值的引用发生变化，导致下游组件重新渲染，我们也需要「记住」这个值。</li> </ul> <p>让我们来看个例子：</p> <pre><code>interface IExampleProps { page: number; type: string; } const Example = ({page, type}: IExampleProps) => { const resolvedValue = useMemo(() => { return getResolvedValue(page, type); }, [page, type]); return <ExpensiveComponent resolvedValue={resolvedValue}/>; };</code></pre> <blockquote> <p>注： <code>ExpensiveComponent</code> 组件包裹了 <code>React.memo</code> 。</p> </blockquote> <p>在上面的例子中，渲染 <code>ExpensiveComponent</code> 的开销很大。所以，当 <code>resolvedValue</code> 的引用发生变化时，作者不想重新渲染这个组件。因此，作者使用了 <code>useMemo</code>，避免每次 render 重新计算 <code>resolvedValue</code>，导致它的引用发生改变，从而使下游组件 re-render。</p> <p>这个担忧是正确的，但是使用 <code>useMemo</code> 之前，我们应该先思考两个问题：</p> <ol> <li>传递给 <code>useMemo</code> 的函数开销大不大？在上面的例子中，就是考虑 <code>getResolvedValue</code> 函数的开销大不大。JS 中大多数方法都是优化过的，比如 <code>Array.map</code>、<code>Array.forEach</code> 等。如果你执行的操作开销不大，那么就不需要记住返回值。否则，使用 <code>useMemo</code> 本身的开销就可能超过重新计算这个值的开销。因此，对于一些简单的 JS 运算来说，我们不需要使用 <code>useMemo</code> 来「记住」它的返回值。</li> <li>当输入相同时，「记忆」值的引用是否会发生改变？在上面的例子中，就是当 <code>page</code> 和 <code>type</code> 相同时，<code>resolvedValue</code> 的引用是否会发生改变？这里我们就需要考虑 <code>resolvedValue</code> 的类型了。如果 <code>resolvedValue</code> 是一个对象，由于我们项目上使用「函数式编程」，每次函数调用都会产生一个新的引用。但是，如果 <code>resolvedValue</code> 是一个原始值（<code>string</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code>, <code>number</code>, <code>symbol</code>），也就不存在「引用」的概念了，每次计算出来的这个值一定是相等的。也就是说，<code>ExpensiveComponent</code> 组件不会被重新渲染。</li> </ol> <p>因此，如果 <code>getResolvedValue</code> 的开销不大，并且 <code>resolvedValue</code> 返回一个字符串之类的原始值，那我们完全可以去掉 <code>useMemo</code>，就像下面这样：</p> <pre><code>interface IExampleProps { page: number; type: string; } const Example = ({page, type}: IExampleProps) => { const resolvedValue = getResolvedValue(page, type); return <ExpensiveComponent resolvedValue={resolvedValue}/>; };</code></pre> <p>还有一个误区就是对创建函数开销的评估。有的人觉得在 render 中创建函数可能会开销比较大，为了避免函数多次创建，使用了 <code>useMemo</code> 或者 <code>useCallback</code>。但是对于现代浏览器来说，创建函数的成本微乎其微。因此，我们没有必要使用 <code>useMemo</code> 或者 <code>useCallback</code> 去节省这部分性能开销。当然，如果是为了保证每次 render 时回调的引用相等，你可以放心使用 <code>useMemo</code> 或者 <code>useCallback</code>。</p> <pre><code>const Example = () => { const onSubmit = useCallback(() => { // 考虑这里的 useCallback 是否必要？ doSomething(); }, []); return <form onSubmit={onSubmit}></form>; };</code></pre> <p>如果只是想在重新渲染时保持值的引用不变，更好的方法是使用 <code>useRef</code>，而不是 <code>useMemo</code>。我并不同意这个观点。让我们来看个例子：</p> <pre><code>// 使用 useMemo function Example() { const users = useMemo(() => [1, 2, 3], []); return <ExpensiveComponent users={users} /> } // 使用 useRef function Example() { const {current: users} = useRef([1, 2, 3]); return <ExpensiveComponent users={users} /> }</code></pre> <p>在上面的例子中，我们用 <code>useMemo</code> 来「记住」<code>users</code> 数组，不是因为数组本身的开销大，而是因为 <code>users </code>的引用在每次 render 时都会发生改变，从而导致子组件 <code>ExpensiveComponent</code> 重新渲染（可能会带来较大开销）。</p> <p>作者认为从语义上不应该使用 <code>useMemo</code>，而是应该使用 <code>useRef</code>，否则会消耗更多的内存和计算资源。虽然在 React 中 <code>useRef</code> 和 <code>useMemo</code> 的实现有一点差别，但是当 <code>useMemo</code> 的依赖数组为空数组时，它和 <code>useRef</code> 的开销可以说相差无几。<code>useRef</code> 甚至可以直接用 <code>useMemo</code> 来实现，就像下面这样：</p> <pre><code>const useRef = (v) => { return useMemo(() => ({current: v}), []); };</code></pre> <p>因此，我认为使用 <code>useMemo</code> 来保持值的引用一致没有太大问题。</p> <p>在编写自定义 Hook 时，返回值一定要保持引用的一致性。因为你无法确定外部要如何使用它的返回值。如果返回值被用做其他 Hook 的依赖，并且每次 re-render 时引用不一致（当值相等的情况），就可能会产生 bug。比如：</p> <pre><code>function Example() { const data = useData(); const [dataChanged, setDataChanged] = useState(false); useEffect(() => { setDataChanged((prevDataChanged) => !prevDataChanged); // 当 data 发生变化时，调用 setState。如果 data 值相同而引用不同，就可能会产生非预期的结果。 }, [data]); console.log(dataChanged); return <ExpensiveComponent data={data} />; } const useData = () => { // 获取异步数据 const resp = getAsyncData([]); // 处理获取到的异步数据，这里使用了 Array.map。因此，即使 data 相同，每次调用得到的引用也是不同的。 const mapper = (data) => data.map((item) => ({...item, selected: false})); return resp ? mapper(resp) : resp; };</code></pre> <p>在上面的例子中，我们通过 <code>useData</code> Hook 获取了 <code>data</code>。每次 render 时 <code>data</code> 的值没有发生变化，但是引用却不一致。如果把 <code>data</code> 用到 <code>useEffect </code>的依赖数组中，就可能产生非预期的结果。另外，由于引用的不同，也会导致 <code>ExpensiveComponent</code> 组件 re-render，产生性能问题。</p> <blockquote> <p>如果因为 prop 的值相同而引用不同，从而导致子组件发生 re-render，不一定会造成性能问题。因为 Virtual DOM re-render ≠ DOM re-render。但是当子组件特别大时，Virtual DOM 的 Diff 开销也很大。因此，还是应该尽量避免子组件 re-render。</p> </blockquote> <p>因此，在使用 <code>useMemo</code> 之前，我们不妨先问自己几个问题：</p> <ol> <li>要记住的函数开销很大吗？</li> <li>返回的值是原始值吗？</li> <li>记忆的值会被其他 Hook 或者子组件用到吗？</li> </ol> <p>回答出上面这几个问题，判断是否应该使用 <code>useMemo</code> 也就不再困难了。不过在实际项目中，还是最好定义出一套统一的规范，方便团队中多人协作。比如第一个问题，开销很大如何定义？如果没有明确的标准，执行起来会非常困难。因此，我总结了下面一些规则：</p> <blockquote> <p>一、应该使用 <code>useMemo</code> 的场景</p> <ol> <li>保持引用相等： <ul> <li>对于组件内部用到的 object、array、函数等，如果用在了其他 Hook 的依赖数组中，或者作为 props 传递给了下游组件，应该使用 <code>useMemo</code>。</li> <li>自定义 Hook 中暴露出来的 object、array、函数等，都应该使用 <code>useMemo</code> 。以确保当值相同时，引用不发生变化。</li> <li>使用 <code>Context</code> 时，如果 <code>Provider</code> 的 value 中定义的值（第一层）发生了变化，即便用了 Pure Component 或者 <code>React.memo</code>，仍然会导致子组件 re-render。这种情况下，仍然建议使用 <code>useMemo</code> 保持引用的一致性。</li> </ul> </li> <li>计算成本很高 <ul> <li>比如 <code>cloneDeep</code> 一个很大并且层级很深的数据</li> </ul> </li> </ol> <p>二、无需使用 useMemo 的场景</p> <ol> <li>如果返回的值是原始值： <code>string</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code>, <code>number</code>, <code>symbol</code>（不包括动态声明的 Symbol），一般不需要使用 <code>useMemo</code>。</li> <li>仅在组件内部用到的 object、array、函数等（没有作为 props 传递给子组件），且没有用到其他 Hook 的依赖数组中，一般不需要使用 <code>useMemo</code>。</li> </ol> </blockquote> <h3>问题四：Hooks 能替代高阶组件和 Render Props 吗？</h3> <p>在 Hooks 出现之前，我们有两种方法可以复用组件逻辑：<a href="https://reactjs.org/docs/render-props.html" target="_blank" rel="nofollow" >Render Props</a> 和<a href="https://reactjs.org/docs/higher-order-components.html" target="_blank" rel="nofollow" >高阶组件</a>。但是这两种方法都可能会造成 JSX「嵌套地狱」的问题。Hooks 的出现，让组件逻辑的复用变得更简单，同时解决了「嵌套地狱」的问题。Hooks 之于 React 就像 async / await 之于 Promise 一样。</p> <p>那 Hooks 能替代高阶组件和 Render Props 吗？官方给出的回答是，在高阶组件或者 Render Props 只渲染一个子组件时，Hook 提供了一种更简单的方式。不过在我看来，Hooks 并不能完全替代 Render Props 和高阶组件。接下来，我们会详细分析这个问题。</p> <p><strong>高阶组件 HOC</strong></p> <p>高阶组件是一个函数，它接受一个组件作为参数，返回一个新的组件。</p> <pre><code>function enhance(Comp) { // 增加一些其他的功能 return class extends Component { // ... render() { return <Comp />; } }; }</code></pre> <p>高阶组件采用了装饰器模式，让我们可以增强原有组件的功能，并且不破坏它原有的特性。例如：</p> <pre><code>const RedButton = withStyles({ root: { background: "red", }, })(Button);</code></pre> <p>在上面的代码中，我们希望保留 <code>Button</code> 组件的逻辑，但同时我们又想使用它原有的样式。因此，我们通过 <code>withStyles</code> 这个高阶组件注入了自定义的样式，并且生成了一个新的组件 <code>RedButton</code>。</p> <p><strong>Render Props</strong></p> <p>Render Props 通过父组件将可复用逻辑封装起来，并把数据提供给子组件。至于子组件拿到数据之后要怎么渲染，完全由子组件自己决定，灵活性非常高。而高阶组件中，渲染结果是由父组件决定的。Render Props 不会产生新的组件，而且更加直观的体现了「父子关系」。</p> <pre><code><Parent> {(data) => { // 你父亲已经把江山给你打好了，并给你留下了一堆金币，至于怎么花就看你自己了 return <Child data={data} />; }} </Parent></code></pre> <p>Render Props 作为 JSX 的一部分，可以很方便地利用 React 生命周期和 Props、State 来进行渲染，在渲染上有着非常高的自由度。同时，它不像 Hooks 需要遵守一些规则，你可以放心大胆的在它里面使用 if / else、map 等各类操作。</p> <p>在大部分情况下，高阶组件和 Render Props 是可以相互转换的，也就是说用高阶组件能实现的，用 Render Props 也能实现。只不过在不同的场景下，哪种方式使用起来简单一点罢了。</p> <p>将上面 HOC 的例子改成 Render Props，使用起来确实要「麻烦」一点：</p> <pre><code><RedButton> {(styles)=>( <Button styles={styles}/> )} </RedButton></code></pre> <p><strong>小结</strong></p> <p>没有 Hooks 之前，高阶组件和 Render Props 本质上都是将复用逻辑提升到父组件中。而 Hooks 出现之后，我们将复用逻辑提取到组件顶层，而不是强行提升到父组件中。这样就能够避免 HOC 和 Render Props 带来的「嵌套地狱」。但是，像 Context 的 <code><Provider/></code> 和 <code><Consumer/></code> 这样有父子层级关系（树状结构关系）的，还是只能使用 Render Props 或者 HOC。</p> <p>对于 Hooks、Render Props 和高阶组件来说，它们都有各自的使用场景：</p> <ul> <li>Hooks： <ul> <li>替代 Class 的大部分用例，除了 <code>getSnapshotBeforeUpdate</code> 和 <code>componentDidCatch</code> 还不支持。</li> <li>提取复用逻辑。除了有明确父子关系的，其他场景都可以使用 Hooks。</li> </ul> </li> <li>Render Props：在组件渲染上拥有更高的自由度，可以根据父组件提供的数据进行动态渲染。适合有明确父子关系的场景。</li> <li>高阶组件：适合用来做注入，并且生成一个新的可复用组件。适合用来写插件。</li> </ul> <p>不过，能使用 Hooks 的场景还是应该优先使用 Hooks，其次才是 Render Props 和 HOC。当然，Hooks、Render Props 和 HOC 不是对立的关系。我们既可以用 Hook 来写 Render Props 和 HOC，也可以在 HOC 中使用 Render Props 和 Hooks。</p> <h3>问题五： 使用 Hooks 时还有哪些好的实践？</h3> <p>1.若 Hook 类型相同，且依赖数组一致时，应该合并成一个 Hook。否则会产生更多开销。</p> <pre><code>const dataA = useMemo(() => { return getDataA(); }, [A, B]); const dataB = useMemo(() => { return getDataB(); }, [A, B]); // 应该合并为 const [dataA, dataB] = useMemo(() => { return [getDataA(), getDataB()] }, [A, B]);</code></pre> <p>2.参考原生 Hooks 的设计，自定义 Hooks 的返回值可以使用 Tuple 类型，更易于在外部重命名。但如果返回值的数量超过三个，还是建议返回一个对象。</p> <pre><code>export const useToggle = (defaultVisible: boolean = false) => { const [visible, setVisible] = useState(defaultVisible); const show = () => setVisible(true); const hide = () => setVisible(false); return [visible, show, hide] as [typeof visible, typeof show, typeof hide]; }; const [isOpen, open, close] = useToggle(); // 在外部可以更方便地修改名字 const [visible, show, hide] = useToggle();</code></pre> <p>3.<code>ref</code> 不要直接暴露给外部使用，而是提供一个修改值的方法。</p> <p>4.在使用 <code>useMemo</code> 或者 <code>useCallback</code> 时，确保返回的函数只创建一次。也就是说，函数不会根据依赖数组的变化而二次创建。举个例子：</p> <pre><code>export const useCount = () => { const [count, setCount] = useState(0); const [increase, decrease] = useMemo(() => { const increase = () => { setCount(count + 1); }; const decrease = () => { setCount(count - 1); }; return [increase, decrease]; }, [count]); return [count, increase, decrease]; };</code></pre> <p>在 <code>useCount</code> Hook 中， <code>count</code> 状态的改变会让 <code>useMemo</code> 中的 <code>increase</code> 和 <code>decrease</code> 函数被重新创建。由于闭包特性，如果这两个函数被其他 Hook 用到了，我们应该将这两个函数也添加到相应 Hook 的依赖数组中，否则就会产生 bug。比如：</p> <pre><code>function Counter() { const [count, increase] = useCount(); useEffect(() => { const handleClick = () => { increase(); // 执行后 count 的值永远都是 1 }; document.body.addEventListener("click", handleClick); return () => { document.body.removeEventListener("click", handleClick); }; }, []); return <h1>{count}</h1>; }</code></pre> <p>在 <code>useCount</code> 中，<code>increase</code> 会随着 <code>count</code> 的变化而被重新创建。但是 <code>increase</code> 被重新创建之后， <code>useEffect</code> 并不会再次执行，所以 <code>useEffect</code> 中取到的 <code>increase</code> 永远都是首次创建时的 <code>increase</code> 。而首次创建时 <code>count</code> 的值为 0，因此无论点击多少次， <code>count</code> 的值永远都是 1。</p> <p>那把 <code>increase</code> 函数放到 <code>useEffect </code>的依赖数组中不就好了吗？事实上，这会带来更多问题：</p> <ul> <li><code>increase</code> 的变化会导致频繁地绑定事件监听，以及解除事件监听。</li> <li>需求是只在组件 mount 时执行一次 <code>useEffect</code>，但是 <code>increase</code> 的变化会导致 <code>useEffect</code> 多次执行，不能满足需求。</li> </ul> <p>如何解决这些问题呢？</p> <p>一、通过 <code>setState</code> 回调，让函数不依赖外部变量。例如：</p> <pre><code>export const useCount = () => { const [count, setCount] = useState(0); const [increase, decrease] = useMemo(() => { const increase = () => { setCount((latestCount) => latestCount + 1); }; const decrease = () => { setCount((latestCount) => latestCount - 1); }; return [increase, decrease]; }, []); // 保持依赖数组为空，这样 increase 和 decrease 方法都只会被创建一次 return [count, increase, decrease]; };</code></pre> <p>二、通过 <code>ref</code> 来保存可变变量。例如：</p> <pre><code>export const useCount = () => { const [count, setCount] = useState(0); const countRef = useRef(count); countRef.current = count; const [increase, decrease] = useMemo(() => { const increase = () => { setCount(countRef.current + 1); }; const decrease = () => { setCount(countRef.current - 1); }; return [increase, decrease]; }, []); // 保持依赖数组为空，这样 increase 和 decrease 方法都只会被创建一次 return [count, increase, decrease]; };</code></pre> <h3>总结</h3> <p>我们总结了在实践中一些常见的问题，并提出了一些解决方案。最后让我们再来回顾一下：</p> <ol> <li>将完全不相关的 state 拆分为多组 state。</li> <li>如果某些 state 是相互关联的，或者需要一起发生改变，就可以把它们合并为一组 state。</li> <li>依赖数组依赖的值最好不要超过 3 个，否则会导致代码会难以维护。</li> <li>如果发现依赖数组依赖的值过多，我们应该采取一些方法来减少它。 <ul> <li>去掉不必要的依赖。</li> <li>将 Hook 拆分为更小的单元，每个 Hook 依赖于各自的依赖数组。</li> <li>通过合并相关的 state，将多个依赖值聚合为一个。</li> <li>通过 <code>setState</code> 回调函数获取最新的 state，以减少外部依赖。</li> <li>通过 <code>ref</code> 来读取可变变量的值，不过需要注意控制修改它的途径。</li> </ul> </li> <li>为了确保不滥用 <code>useMemo</code>，我们定义了下面几条规则： <ul> <li>如果返回的值是原始值： <code>string</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code>, <code>number</code>, <code>symbol</code>（不包括动态声明的 Symbol），则不需要使用 <code>useMemo</code>。</li> <li>对于组件内部用到的 object、array、函数等，如果没有用到其他 Hook 的依赖数组中，或者造成子组件 re-render，可以不使用 <code>useMemo</code>。</li> <li>自定义 Hook 中暴露出来的 object、array、函数等，都应该使用 <code>useMemo</code> 。以确保当值相同时，引用不发生变化。</li> </ul> </li> <li>Hooks、Render Props 和高阶组件都有各自的使用场景，具体使用哪一种要看实际情况。</li> <li>若 Hook 类型相同，且依赖数组一致时，应该合并成一个 Hook。</li> <li>自定义 Hooks 的返回值可以使用 Tuple 类型，更易于在外部重命名。如果返回的值过多，则不建议使用。</li> <li><code>ref</code> 不要直接暴露给外部使用，而是提供一个修改值的方法。</li> <li>在使用 <code>useMemo</code> 或者 <code>useCallback</code> 时，可以借助 <code>ref</code> 或者 <code>setState</code> callback，确保返回的函数只创建一次。也就是说，函数不会根据依赖数组的变化而二次创建。</li> </ol> <h1>十九、React Router</h1> <p>React Router 现在的版本是 5, 于 2019 年 3 月 21 日搞笑的发布，<a href="https://reacttraining.com/blog/react-router-v5/" target="_blank" rel="nofollow" >搞笑的官网链接</a>， 本来是要发布 4.4 的版本的，结果成了 5。从 4 开始，使用方式相对于之前版本的思想有所不同。之前版本的思想是传统的思想：<strong>路由应该统一在一处渲染</strong>， Router 4 之后是这样的思想：<strong>一切皆组件</strong></p> <p>React Router 包含了四个包:</p> <table> <thead> <tr> <th>包名</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router" target="_blank" rel="nofollow" ><code>react-router</code></a></td> <td>React Router 核心 api</td> </tr> <tr> <td><a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom" target="_blank" rel="nofollow" ><code>react-router-dom</code></a></td> <td>React Router 的 DOM 绑定，在浏览器中运行不需要额外安装<code>react-router</code></td> </tr> <tr> <td><a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-native" target="_blank" rel="nofollow" ><code>react-router-native</code></a></td> <td><a href="https://facebook.github.io/react-native/" target="_blank" rel="nofollow" >React Native</a> 中使用，而实际的应用中，其实不会使用这个。</td> </tr> <tr> <td><a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-config" target="_blank" rel="nofollow" ><code>react-router-config</code></a></td> <td>静态路由的配置</td> </tr> </tbody> </table> <p>主要使用<code>react-router-dom</code></p> <h2>1、使用方式</h2> <p>正常情况下，直接按照<a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank" rel="nofollow" >官网</a>的 demo 就理解 路由的使用方式，有几个点需要特别的强调：</p> <ul> <li>Route 组件的 exact 属性</li> </ul> <p><code>exact</code>属性标识是否为严格匹配， 为<code>true</code>是表示严格匹配，为<code>false</code>时为正常匹配。</p> <ul> <li>Route 组件的 render 属性而不是 component 属性</li> </ul> <p>怎么在渲染组件的时候，对组件传递属性呢？使用<code>component</code>的方式是不能直接在组件上添加属性的。所以，React Router 的<code>Route</code>组件提供了另一种渲染组件的方式 <code>render</code>, 这个常用于页面组件级别的权限管理。</p> <ul> <li> <p>路由的参数传递与获取</p> </li> <li> <p>Switch 组件</p> </li> </ul> <p>总是渲染第一个匹配到的组件</p> <ul> <li> <p>处理 404 与默认页</p> </li> <li> <p>withRoute 高阶组件的使用</p> </li> <li> <p>管理一个项目路由的方法</p> </li> <li> <p><a href="https://reacttraining.com/react-router/web/guides/code-splitting" target="_blank" rel="nofollow" >code spliting</a></p> </li> <li> <p>HashRouter 和 BrowserRouter 的区别，前端路由和后端路由的区别。</p> </li> </ul> <h2>2、React Router 基本原理</h2> <p>React Router 甚至大部分的前端路由都是依赖于<a href="https://github.com/browserstate/history.js" target="_blank" rel="nofollow" ><code>history.js</code></a>的，它是一个独立的第三方 js 库。可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的 API。</p> <ul> <li>老浏览器的 history: 通过<code>hash</code>来存储在不同状态下的<code>history</code>信息，对应<code>createHashHistory</code>，通过检测<code>location.hash</code>的值的变化，使用<code>location.replace</code>方法来实现 url 跳转。通过注册监听<code>window</code>对象上的<code>hashChange</code>事件来监听路由的变化，实现历史记录的回退。</li> <li>高版本浏览器: 利用 HTML5 里面的 history，对应<code>createBrowserHistory</code>, 使用包括<code>pushState</code>， <code>replaceState</code>方法来进行跳转。通过注册监听<code>window</code>对象上的<code>popstate</code>事件来监听路由的变化，实现历史记录的回退。</li> <li>node 环境下: 在内存中进行历史记录的存储，对应<code>createMemoryHistory</code>。直接在内存里<code>push</code>和<code>pop</code>状态。</li> </ul> <h1>二十、Mobx</h1> <p>Mobx 是一个功能强大，上手非常容易的状态管理工具。redux 的作者也曾经向大家推荐过它，在不少情况下可以使用 Mobx 来替代掉 redux。</p> <p><img decoding="async" src="./images/mobx-flow.png" alt="MobX unidirectional flow" /></p> <p>这张图来自于官网，把这张图理解清楚了。基本上对于 mobx 的理解就算入门了。</p> <p>官网有明确的核心概念使用方法，并配有<a href="https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx" target="_blank" rel="nofollow" >egghead</a>的视频教程。这里就不一一赘述了。</p> <p>要特别注意当使用 <code>mobx-react</code> 时可以定义一个新的生命周期钩子函数 <code>componentWillReact</code>。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候 <code>componentWillReact</code> 会被触发。这使得它很容易追溯渲染并找到导致渲染的操作(action)。</p> <ul> <li> <p><code>componentWillReact</code> 不接收参数</p> </li> <li> <p><code>componentWillReact</code> 初始化渲染前不会触发 (使用 <code>componentWillMount</code> 替代)</p> </li> <li> <p><code>componentWillReact</code> 对于 mobx-react@4+, 当接收新的 props 时并在 <code>setState</code> 调用后会触发此钩子</p> </li> <li> <p>要触发<code>componentWillReact</code>必须在 render 里面用到被观察的变量</p> </li> <li> <p>使用 Mobx 之后不会触发<code>componentWillReceiveProps</code></p> </li> </ul> <h2>1、搭建环境</h2> <pre><code class="language-bash">mkdir my-app cd my-app npm init -y npm i webpack webpack-cli webpack-dev-server -D npm i html-webpack-plugin -D npm i babel-loader @babel/core @babel/preset-env -D npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D npm i @babel/plugin-transform-runtime -D npm i @babel/runtime -S npm i mobx -S mkdir src mkdir dist touch index.html touch src/index.js touch webpack.config.js</code></pre> <p>编写 webpack.config.js</p> <pre><code class="language-js">const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", entry: path.resolve(__dirname, "src/index.js"), output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], plugins: [ //支持装饰器 ["@babel/plugin-proposal-decorators", { legacy: true }], ["@babel/plugin-proposal-class-properties", { loose: true }], ["@babel/plugin-transform-runtime"], ], }, }, }, ], }, plugins: [new HtmlWebpackPlugin()], devtool: "inline-source-map", };</code></pre> <p>编写 index.html</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html></code></pre> <h2>2、Mobx 入门</h2> <h3>(1) observable 可观察的状态</h3> <ul> <li>map</li> </ul> <pre><code class="language-js">import { observable } from "mobx"; // 声明 const map = observable.map({ a: 1, b: 2 }); // 设置 map.set("a", 11); // 获取 console.log(map.get("a")); console.log(map.get("b")); // 删除 map.delete("a"); console.log(map.get("a")); // 判断是否存在属性 console.log(map.has("a"));</code></pre> <ul> <li>object</li> </ul> <pre><code class="language-js">import { observable } from "mobx"; // 声明 const obj = observable({ a: 1, b: 2 }); // 修改 obj.a = 11; // 访问 console.log(obj.a, obj.b);</code></pre> <ul> <li>array</li> </ul> <pre><code class="language-js">import { observable } from "mobx"; const arr = observable(["a", "b", "c", "d"]); // 访问 console.log(arr[0], arr[10]); // 操作 arr.pop(); arr.push("e");</code></pre> <ul> <li>基础类型</li> </ul> <pre><code class="language-js">import {observable} from 'mobx'/ const num = observable.box(10); const str = observable.box('hello'); const bool = observable.box(true); // 获得值 console.log(num.get(), str.get(), bool.get()); // 修改值 num.set(100); str.set('hi'); bool.set(false); console.log(num.get(), str.get(), bool.get());</code></pre> <h3>(2) observable 装饰器</h3> <pre><code class="language-js">import { observable } from "mobx"; // observable这个函数可以识别当成普通函数调用还是装饰器调用 // 如果是装饰器，会自动识别数据类型，使用不同的包装转换方案。 class Store { @observable arr = []; @observable obj = { a: 1 }; @observable map = new Map(); @observable str = "hello"; @observable num = 123; @observable bool = false; } const store = new Store(); console.log(store); console.log(store.obj.a);</code></pre> <p>注意：vscode 编译器中，js 文件使用装饰器会报红。解决方式：</p> <p>在根目录编写 jsconfig.json</p> <pre><code class="language-json">{ "compilerOptions": { "module": "commonjs", "target": "es6", "experimentalDecorators": true }, "include": ["src/**/*"] }</code></pre> <h3>(3) 对 observables 作出响应</h3> <ul> <li>基础代码：</li> </ul> <pre><code class="language-js">import { observable } from "mobx"; class Store { @observable arr = []; @observable obj = { a: 1 }; @observable map = new Map(); @observable str = "hello"; @observable num = 123; @observable bool = false; } const store = new Store();</code></pre> <ul> <li>computed</li> </ul> <p>计算值是可以根据现有的状态或其它计算值衍生出的值, 跟 vue 中的 computed 非常相似。</p> <pre><code class="language-js">const result = computed(() => store.str + store.num); console.log(result.get()); // 监听数据的变化 result.observe(change => { console.log("result:", change); }); //两次对store属性的修改都会引起result的变化 store.str = "world"; store.num = 220;</code></pre> <p>computed 可作为装饰器， 将 result 的计算添加到类中：</p> <pre><code class="language-js">class Store { @observable arr = []; @observable obj = { a: 1 }; @observable map = new Map(); @observable str = "hello"; @observable num = 123; @observable bool = false; @computed get result() { return this.str + this.num; } }</code></pre> <ul> <li>autorun</li> </ul> <p>当你想创建一个响应式函数，而该函数本身永远不会有观察者时,可以使用 <code>mobx.autorun</code></p> <p>所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。</p> <p>经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用<code>autorun</code>。 其余情况都应该使用 <code>computed</code>。</p> <pre><code class="language-js">//aotu会立即触发一次 autorun(() => { console.log(store.str + store.num); }); autorun(() => { console.log(store.result); }); //两次修改都会引起autorun执行 store.num = 220; store.str = "world";</code></pre> <ul> <li>when</li> </ul> <pre><code>when(predicate: () => boolean, effect?: () => void, options?)</code></pre> <p><code>when</code> 观察并运行给定的 <code>predicate</code>，直到返回 true。 一旦返回 true，给定的 <code>effect</code> 就会被执行，然后 autorunner(自动运行程序) 会被清理。 该函数返回一个清理器以提前取消自动运行程序。</p> <p>对于以响应式方式来进行处理或者取消，此函数非常有用。</p> <pre><code class="language-js">when( () => store.bool, () => { console.log("when function run....."); } ); store.bool = true;</code></pre> <ul> <li>reaction</li> </ul> <p>用法: <code>reaction(() => data, (data, reaction) => { sideEffect }, options?)</code>。</p> <p><code>autorun</code> 的变种，对于如何追踪 observable 赋予了更细粒度的控制。 它接收两个函数参数，第一个(<em>数据</em> 函数)是用来追踪并返回数据作为第二个函数(<em>效果</em> 函数)的输入。 不同于 <code>autorun</code> 的是当创建时<em>效果</em> 函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行。 在执行 <em>效果</em> 函数时访问的任何 observable 都不会被追踪。</p> <pre><code class="language-js">// reaction reaction( () => [store.str, store.num], arr => { console.log(arr.join("/")); } ); //只要[store.str, store.num]中任意一值发生变化，reaction第二个函数都会执行 store.num = 220; store.str = "world";</code></pre> <h3>(4) 改变 observables 状态</h3> <ul> <li>action</li> </ul> <p>接上面案例，添加 action 到类中：</p> <pre><code class="language-js">class Store { @observable arr = []; @observable obj = { a: 1 }; @observable map = new Map(); @observable str = "hello"; @observable num = 123; @observable bool = false; @computed get result() { return this.str + this.num; } @action bar() { this.str = "world"; this.num = 40; } } const store = new Store(); //调用action，只会执行一次 store.bar();</code></pre> <ul> <li>action.bound</li> </ul> <p><code>action.bound</code> 可以用来自动地将动作绑定到目标对象。</p> <pre><code class="language-js">class Store { @observable arr = []; @observable obj = { a: 1 }; @observable map = new Map(); @observable str = "hello"; @observable num = 123; @observable bool = false; @computed get result() { return this.str + this.num; } @action bar() { this.str = "world"; this.num = 40; } //this 永远都是正确的 @action.bound foo() { this.str = "world"; this.num = 40; } } const store = new Store(); setInterval(store.foo, 1000);</code></pre> <ul> <li>runInAction</li> </ul> <p><code>action</code> 只能影响正在运行的函数，而无法影响当前函数调用的异步操作。如果你使用 async function 来处理业务，那么我们可以使用 <code>runInAction</code> 这个 API 来解决这个问题。</p> <pre><code class="language-js">@action async fzz() { await new Promise((resolve) => { setTimeout(() => { resolve({ num: 220, str: 'world' }) }, 1000) }) runInAction(()=>{ store.num = 220 store.str = 'world' }) }</code></pre> <h2>3、应用</h2> <h3>(1) 在 react 中使用 mobx</h3> <p>在 react 中使用 mobx，需要借助 mobx-react。</p> <p>它的功能相当于在 react 中使用 redux，需要借助 react-redux。</p> <p>首先来搭建环境：</p> <pre><code class="language-bash">create-react-app react-app cd react-app npm run eject npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D npm i mobx mobx-react -S</code></pre> <p>修改 package.json 中 babel 的配置：</p> <pre><code class="language-json"> "babel": { "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ] }</code></pre> <p>注意：vscode 编译器中，js 文件使用装饰器会报红。解决方式：</p> <p>在根目录编写写 jsconfig.json</p> <pre><code class="language-json">{ "compilerOptions": { "module": "commonjs", "target": "es6", "experimentalDecorators": true }, "include": ["src/**/*"] }</code></pre> <h3>(2) 项目应用</h3> <p><strong>入口文件：</strong></p> <pre><code class="language-jsx">import { Provider } from "mobx-react"; <Provider store={homeStore} morestore={moreStore}> <App></App> </Provider>;</code></pre> <p><strong>组件：</strong></p> <pre><code class="language-jsx">import { observer, inject } from "mobx-react"; @inject("store") @observer class Swiper extends Component {}</code></pre> <h1>附加</h1> <h2>一、create-react-app 支持 decorators</h2> <pre><code class="language-shell">yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env</code></pre> <p><strong>创建 .babelrc</strong></p> <pre><code class="language-json">{ "presets": ["@babel/preset-env"], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }</code></pre> <p><strong>创建 config-overrides.js</strong></p> <pre><code class="language-js">const path = require("path"); const { override, addDecoratorsLegacy } = require("customize-cra"); function resolve(dir) { return path.join(__dirname, dir); } const customize = () => (config, env) => { config.resolve.alias["@"] = resolve("src"); if (env === "production") { config.externals = { react: "React", "react-dom": "ReactDOM", }; } return config; }; module.exports = override(addDecoratorsLegacy(), customize());</code></pre> <p><strong>安装依赖</strong></p> <pre><code>yarn add customize-cra react-app-rewired</code></pre> <p><strong>修改 package.json</strong></p> <pre><code>... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }, ...</code></pre> <h2>二、React 优化</h2> <!--<div class="oshimai"></div>--> <!--<h2 style="opacity:0;max-height:0;margin:0">Comments</h2>--><!-- 评论跳转标记 --> </div><!-- .entry-content --> <div class="single-reward"> <div class="reward-open"> <i class="fa fa-usd" aria-hidden="true"></i> <div class="reward-main"> <ul class="reward-row"> <li class="alipay-code"><img src="https://cdn.jsdelivr.net/gh/huxinfeng/asset@latest/image/pay_ali.jpg"></li><li class="wechat-code"><img src="https://cdn.jsdelivr.net/gh/huxinfeng/asset@latest/image/pay_weixi.png"></li> </ul> </div> </div> </div> <footer class="post-footer"> <div class="post-tags"> <i class="iconfont icon-tags"></i> <a href="https://blog.huxinfeng.com/tag/react/" rel="tag">REACT</a> </div> </footer><!-- .entry-footer --> </article><!-- #post-## --> <div class="toc-container"><div class="toc"></div></div> <section class="post-squares nextprev"> <div class="post-nepre half previous"> <a href="https://blog.huxinfeng.com/package/webpackjs/2021/08/16/webpack5-4.html" rel="prev"><div class="background lazyload" style="background-image:url(https://s.nmxc.ltd/sakurairo_vision/@2.5/load_svg/outload.svg);" data-src="https://blog.huxinfeng.com/wp-json/sakura/v1/image/feature?690"></div><span class="label">上一篇文章</span><div class="info"><h3>学习 Webpack5 之路4（原理篇）</h3><hr></div></a> </div> <div class="post-nepre half next"> <a href="https://blog.huxinfeng.com/uncategorized/2021/08/18/blog-beautification.html" rel="next"><div class="background lazyload" style="background-image:url(https://s.nmxc.ltd/sakurairo_vision/@2.5/load_svg/outload.svg);" data-src="https://i.loli.net/2021/08/18/XReHT6oEsW7LO8t.png"></div><span class="label">下一篇文章</span><div class="info"><h3>Blog 美化-文章背景图片上下移动</h3><hr></div></a> </div> </section> <section class="author-profile"> <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <a href="https://blog.huxinfeng.com/author/huxinfeng/" class="profile gravatar"><img src="https://cdn.jsdelivr.net/gh/huxinfeng/asset@latest/image/huxinfeng.png" itemprop="image" alt="星宿君" height="70" width="70"></a> <div class="meta"> <span class="title">Author</span> <h3 itemprop="name"> <a href="https://blog.huxinfeng.com/author/huxinfeng/" itemprop="url" rel="author">星宿君</a> </h3> </div> </div> <hr> <p><i class="iconfont icon-write"></i>博主好穷啊，快点支助一下吧 ε = = (づ′▽`)づ</p> </section> </main><!-- #main --> </div><!-- #primary --> </div><!-- #content --> <section id="comments" class="comments"> <div class="commentwrap comments-hidden"> <div class="notification"><i class="iconfont icon-mark"></i>查看评论 - <span class="noticom">NOTHING </span> </div> </div> <div class="comments-main"> <h3 id="comments-list-title">Comments <span class="noticom">NOTHING </span></h3> <div id="loading-comments"><span></span></div> <div class="commentwrap"> <div class="notification-hidden"><i class="iconfont icon-mark"></i> 暂无评论</div> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/js-framework/reactjs/2021/08/17/react.html#respond" style="display:none;">取消回复</a></small></h3><form action="https://blog.huxinfeng.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p style="font-style:italic"><a href="https://segmentfault.com/markdown" target="_blank"><i class="iconfont icon-markdown" style="color:var(--comment_area_matching);"></i></a> Markdown Supported while <i class="fa fa-code" aria-hidden="true"></i> Forbidden</p><div class="comment-textarea"><textarea placeholder="你是我一生只会遇见一次的惊喜 ..." name="comment" class="commentbody" id="comment" rows="5" tabindex="4">你是我一生只会遇见一次的惊喜 ...