react

[Silencer-1984]

生命周期

React 逐渐废弃的生命周期方法：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

挂载阶段

• constructor：构造函数，最先被执行，通常在构造函数中初始化 state 对象或者给自定义方法绑定 this
• getDerivedStateFromProps：static getDerivedStateFromProps(nextProps, prevState)，这是个静态方法，当我们接收到新的属性想去修改我们 state，可以使用 getDerivedStateFromProps。
• render：render 函数是个纯函数，只返回需要渲染的东西，不应该包含其他的业务逻辑，可以返回原生 DOM、React 组件、Fragment、Portals、字符串和数字等内容。
• componentDidMount：组件装载之后调用，此时我们可以获取到 DOM 节点并操作，比如对 Canvas、SVG 等操作。服务器请求、订阅都可以写这个里面，但是记得在 componentWillUnmount 中取消订阅。
• React 的接口请求是放在 componentDidMount 里面比较合适，旧版本有人放在 componentWillMount 里面，从而导致多次请求，现在 componentWillMount 不推荐使用了，所以转 componentDidMount 就非常科学了。

存在以下问题：

• 为什么 getDerivedStateFromProps 是静态的？ 当它设置为静态函数，表明这个函数不能通过 this 访问到 class 的属性，也并不推荐直接访问属性。

• 哪些生命周期可以 setState？ 可以在 componentDidMount 和 componentDidUpdate 中使用，此时 DOM 已经稳定下来了，可以进行数据的操作了。

更新阶段

• getDerivedStateFromProps：此方法在更新阶段也会被调用。
• shouldComponentUpdate：shouldComponentUpdate(nextProps, nextState)，有两个参数，表示新的属性和变化之后的 state，返回一个布尔值。如果是 true 表示会触发重新渲染，false 表示不会触发重新渲染，默认返回 true。可以利用这个生命周期来优化 React 程序性能。
• render：同挂载阶段 render。
• getSnapshotBeforeUpdate：getSnapshotBeforeUpdate(prevProps, prevState)，这个方法会在 render 之后，componentDidUpdate 之前调用，有两个参数，表示之前属性和之前的 state。这个函数有一个返回值，会作为第三个参数传给 componentDidUpdate，如果不需要返回值，可以返回 null，这个方法必须和 componentDidUpdate 配合使用。
• componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot)，在 getSnapshotBeforeUpdate 之后调用，有三个参数，表示之前的 props，之前的 state，以及 snapshot。参数 snapshot 是 getSnapshotBeforeUpdate 返回的，如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或者计算过程迁移到 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或者更新状态。

卸载阶段

• componentWillUnmount：当组件被卸载或者销毁时会被调用，在这里清除定时器，或者取消网络请求，用来清理无效的 DOM 元素等垃圾回收工作

调用 setState 之后发生了什么

• 合并参数对象，触发调和过程
• 计算新树和老树差异（Diff）
• 根据差异进行最小化重新渲染

setState 是同步还是异步

有时候同步，有时候异步。

1. setState 在合成事件和钩子函数中是异步的，在原生事件和 setTimeout 是同步的。
2. setState 的异步，并不是说内部由异步代码实现，它本身执行的过程和代码是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，从而形成了所谓的异步。
3. setState 可以通过第二个参数 setState(partialState, callback)，在回调方法中拿到更新后的结果。

组件通讯

• 父组件向子组件通讯：父组件向子组件传 props 方式，向子组件进行通讯。
• 子组件向父组件通讯：父组件在 props 中传递方法，然后子组件调用这个方法，将自身需要传递的信息，传递到父组件的作用域中。
• 复杂点的通讯：借助 React 的 Context，或者 Redux 进行数据通讯

Hook

Hook 使用带来的好处：

• 减少状态逻辑复用的风险：Hook 和 Mixin 在用法上有一定的相似之处，但是 Mixin 引入的逻辑和状态是可以相互覆盖的，而多个 Hook 之间互不影响，这让我们不需要在把一部分精力放在防止避免逻辑复用的冲突上。
• 避免地狱式嵌套：大量使用 HOC 的情况下让我们的代码变得嵌套层级非常深，使用 Hook，我们可以实现扁平式的状态逻辑复用，而避免了大量的组件嵌套。
• 让组件更容易理解：在使用 class 组件构建我们的程序时，他们各自拥有自己的状态，业务逻辑的复杂使这些组件变得越来越庞大，各个生命周期中会调用越来越多的逻辑，越来越难以维护。使用 Hook，可以让你更大限度的将公用逻辑抽离，将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。
• 使用函数代替 class：相比函数，编写一个 class 可能需要掌握更多的知识，需要注意的点也越多，比如 this 指向、绑定事件等等。另外，计算机理解一个函数比理解一个 class 更快。Hooks 让你可以在 class 之外使用更多 React 的新特性。

性能优化

1. 首屏渲染优化。
   SVG
   ，也可以使用插件 prerender-spa-plugin 插件进行首屏渲染。
2. 页面切换优化。使用 html-webpack-plugin 插件自动插入 loading，这样切换的时候，就不需要在每个页面都写一套 loading。
3. 减少业务代码体积。通过 Tree Shaking 来减少一些代码。
4. 提取公共代码。通过 SplitChunkPlugin 自动拆分业务基础库，减少大文件的存在。
5. 切分代码。通过 Code Splitting 来懒加载代码，提高用户的加载体验。例如通过 React Loadable 来将组件改写成支持动态 import 的形式。
6. 懒加载。React 可以通过 react-lazyload 这种成熟组件来进行懒加载的支持。
7. 页面占位。有时候加载页面的文本、图片的时候，会出现 “闪屏” 的情况，比如图片或者文字没有加载完毕，对应位置空白，然后加载完毕，会突然撑开页面，导致闪屏。这时候使用第三方组件 react-placeholder 可以解决这种情况

事件机制

React 其实自己实现了一套事件机制，首先我们考虑一下以下代码：

const Test = ({ list, handleClick }) => ({
    list.map((item, index) => (
        <span onClick={handleClick} key={index}>{index}</span>
    ))
})

以上类似代码想必大家经常会写到，但是你是否考虑过点击事件是否绑定在了每一个标签上？事实当然不是，JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了 document 上。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。

另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。

那么实现合成事件的目的是什么呢？总的来说在我看来好处有两点，分别是：

合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。