React新特性一览

谁践踏了优雅 2021-11-09 08:44 374阅读 0赞

*  生命周期

1.  componentWillMount和componentWillReceiveProps替换为static getDerivedStateFromProps。getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
2.  新增错误处理生命周期 static getDerivedStateFromError和componentDidCatch

getDerivedStateFromError生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state，getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。 如遇此类情况，请改用 componentDidCatch()。

*  HOOK  
           hook特性可以它让你在不编写 class 的情况下使用 state 以及其他的 React 特性。它是一个特殊的函数  
    1. hook之useState  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70][]  
             通常情况下无状态组件是没有办法使用组件状态的，那么现在通过useState即可实现在无状态组件中使用组件状态（在这里无状态组件叫做函数组件好一点）。  
             在上面的例子中\`const \[count, setCount\] = useState(0);\`  
    我们调用useState函数的时候，定义了一个变量叫做count(名字随意)，它的初始值就是在setCount中传入的参数而setCount（名字随意）就是一个改变count的函数，这类似于状态组件当中在state中定义count，而setCount的作用类似于调用this.setState()来改变count。  这里需要注意的是调用useState的时候需要成对的获取一个变量和一个可以修改变量的函数（在这里即是count和setCount）  
    2. hook之useEffect  
                该hook可以使你在无状态组件（也叫函数组件）中执行副作用（例如请求数据或者清除定时器等）操作，我们可以把该hook看做是componentDidMount/componentDidUpdate/componentWillUnmount三个生命周期函数的组合，即在该三个生命周期函数任意一个触发的时候，useEffect也会被触发  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1][]  
    在上面的例子中，当组件挂载完成后即useEffect会被触发，当我们调用setCount函数修改count的值之后useEffect会被触发，当组件卸载时也会触发useEffect  
             在这里我们可以把常见的副作用分为两类：需要清除的（例如定时器、事件监听器等）和不需要清除的（例如ajax请求等），这里我们主要讲一下需要清除的副作用怎么来操作：很简单，你只需要让useEffect函数返回一个函数即可，那么该函数就会在组件卸载的时候执行，你只需要在该函数里面执行清除操作（例如clearInterval(timer)）就Ok了  
    3. hook规则：  
    只在对顶层使用hook，不要在循环，条件或者嵌套函数中调用hook,遵循这条规则可以确保hook在每次渲染中都按照同样的顺序被调用，这可以是React在多次的useState和useEffect调用之间保持hook状态的正确。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70]: /images/20211109/e14f44d33cc24ebfb6017a60c169d440.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1]: /images/20211109/b34229b25fdb4af0a22b3e9a1b5922e2.png