React最新特性学习

[Genluo]

Hook新的特性

钩子是可以让你与React状态以及函数式组件的生命周期特性“挂钩”的函数。钩子是为了让你抛弃类使用React的，所以它不能在类中运行。（我们不推荐你立即重写已经存在的组件，但是如果你喜欢的话可以在新的组件中开始使用钩子。）

为什么需要引入Hooks特性

• 难以重用和共享组件中与状态相关的逻辑
• 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
• 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题
• 由于业务变动，函数组件不得不改为类组件等等
• 更好的实现函数式编程

核心API

• userState

为函数组件带来local state，函数只有一个参数，用来确定初始化state的值，返回一对变量，非别是state和修改此state的方法

• useEffect

可以利用我们组件中local state 进行一些带有副作用的操作，useEffect 中还可以通过传入第二个参数来决定是否执行里面的操作来避免一些不必要的性能损失，只要第二个参数数组中的成员的值没有改变，就会跳过此次执行。如果传入一个空数组 [ ]，那么该 effect 只会在组件 mount 和 unmount 时期执行。

userEffect换可以返回一个函数，这个函数被称之为清理函数（clean up）

useEffect 什么时候执行？ 它会在组件 mount 和 unmount 以及每次重新渲染的时候都会执行，也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行。

清理函数(clean up)什么时候执行？ 它会在前一次 effect执行后，下一次 effect 将要执行前，以及 Unmount 时期执行

• 其余API

注意事项

1. 只能在函数组件中使用Hooks，不能再类组件中使用
2. 只能在顶层代码（Top Level）中调用Hooks，不能在循环或者判断语句中调用，这样做是为了让我们的Hooks每次渲染的时候都会按照相同的顺序进行调用，因为useState需要依赖参照第一次渲染的调用顺序来匹配对应的state，否则useState无法正确返回对应的state

为什么要多使用Hooks特性

Hooks解决问题

• 如何解决 状态有关的逻辑(stateful logic) 的重用和共享问题

针对目前存在的这种问题，有两种解决方法一种是Render Props、另一种是Higher-Order Components，但是这两种方法都存在明显的缺陷，一是造成组件数量增多，组件树结构的改变，而且还可能出现组件嵌套地狱的情况，现在React中通过custom Hooks来解决这个问题。

import { useState, useEffect } from 'react';

function useCount() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  
  return count
}

这里面约定命名要使用use*开头，方便我们进行区分，有利于我们进行维护，并且可以将封装好的Hooks提交到社区中进行共享

• 具有复杂逻辑的组件的开发和维护

状态和相关处理逻辑可以按照功能进行划分，不必散落在各个生命周期中，降低开发和维护的难度，除了这几个hooks还有其他额外的hooks，在此继续了解 Hooks API Reference

提出相关问题

• 出现Hooks之后应该如何选择函数组价和类组件

Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon.

It is a very early time for Hooks, so some integrations like DevTools support or Flow/TypeScript typings may not be ready yet. Some third-party libraries might also not be compatible with Hooks at the moment.

• Hooks是否能够替换render-props 和 higher-order components？

Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a renderItem prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree

React Fiber

原来组件更新是同步的，但是这种同步更新会带来页面卡顿，这种体验很不好，为了解决这个问题，react团队历时两年，将核心是更新算法重写，通过将javascript中同步的任务分成很多小片，把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。React Fiber把更新过程碎片化，每执行完一段更新过程，就把控制权交给React负责任务协调的模块，看有没有优先级高的任务，如果没有就继续更新，如果有紧急任务，则首先处理紧急任务。

相关资料

• React Fiber - 知乎