React 快速入门

自己都觉得没写好，后期得重新改

什么是 React

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

看完这种描述你还是会很懵，简而言之，使用 React 相当于需要学会一套新的书写 Html 方式，这是最简单的一个 React Holle World！

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

含义为：将一个内容为 <h1>Hello, world!</h1> 的组件放置在 id 为 root 的标签元素中

官方文档：官方文档传送门

React 环境搭建

暂略

React 生命周期

import React from 'react';

class Template extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        console.log("constructor----------");
    }

    componentWillMount() {
        console.log("componentWillMount----------");
    }

    componentWillReceiveProps(nextProps, nextContext) {
        console.log("componentWillReceiveProps----------");
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("shouldComponentUpdate----------");
        return true;
    }

    render() {
        return (
            <div>Hello, world!</div>
        );
    }

    componentDidMount() {
        console.log("componentDidMount----------");
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate----------");
    }

    componentWillUnmount() {
        console.log("componentWillUnmount----------");
    }
}

export default Template;

这是一个基于 ES 6 语法的 react 组件声明, render() 的返回值则是该组件应包含的 html 内容

生命周期	含义
constructor	组件的构造函数，可以赋 state 、props 初值
componentWillMount	初始化时被调用一次
componentWillReceiveProps	父组件传递的给当前组件的 props 发生变动
shouldComponentUpdate	准备开始渲染，该函数返回 true才会真正开始渲染，人为返回false是优化性能的关键
render	构建 dom 元素
componentDidMount	虚拟 dom、实际 dom 渲染已完成，初次渲染完毕时被调用，jquery 等基于实际 dom 代码在此阶段可以被响应
componentDidUpdate	虚拟 dom、实际 dom 渲染已完成，除初次渲染完毕之外时被调用，jquery 等基于实际 dom 代码在此阶段可以被响应
componentWillUnmount	当前组件即将被销毁前被调用，通常在此处书写解除监听事件等清理工作

React 的重要事项

也许你听过 React 性能多高，dom 节点差异比较算法多厉害……，但你得明白 dom 或者 state 发生变化时 React 的行为。
假设 A、B、C 均为 react 组件,假设发生三次渲染，渲染内容分别为

// 第一次 render
<div>
<A>
<B></B>
<A/>
</div>

// 第二次 render

<div>
<A><A/>
<B></B>
</div>

// 第三次 render
<div>
<A><A/>
<C><C/>
</div>

从第一次到第二次渲染，会触发 A 组件和 B 组件的 componentWillUnmount,随后是 A、B组件的 constructor 以及后续完成渲染

从第二次到第三次渲染，看起来 A 的位置未发生变动，但事实上仍会触发 A 组件和 B 组件的 componentWillUnmount,随后是 A、C组件的 constructor 以及后续生命周期以完成渲染

很明显这里没有复用组件，进行了多余的删除与创建过程。想要进行优化，就得提到key了，这个可以为组件作唯一标识，可以告诉 react 下一次渲染时组件是否是原来的那一个。

// 第四次 render

<div>
<A key={"独一无二"}><A/>
<B></B>
</div>

// 第五次 render
<div>
<A key={"独一无二"}><A/>
<C><C/>
</div>

从第四次到第五次渲染，会触发 B 组件的 componentWillUnmount,随后是 C组件的 constructor 以及后续生命周期以完成渲染,以及 A 组件的 shouldComponentUpdate

具体情况可自行根据上面的 Template 内容实验，如果你想稍微偷点懒，渲染生命周期触发的实验 Demo GitHub 地址

PS:如果是父组件内部嵌套多个子组件，父组件 state 发生任何变动，会触发所有子组件的 shouldComponentUpdate，如果该函数返回了 true，对应的组件就会执行重新渲染。

参考资料

React 渲染机制解析

菜鸟教程 React

React 生命周期