React - 机制

Chapter 2

• Effect

  • Effect与组件是相互独立的生命周期。Effect的执行会是在组件渲染完提交到屏幕上后执行，并且在组件卸载后也会执行相应的清理函数来卸载

    • 因为Effect是在渲染后执行，所以如果在Effect中修改state值，会导致组件的重新渲染。

  • import { useEffect } from 'react'
    export default function() {
        const [count, setCount] = useState(0);
        const [num, setNum] = useState(0);
        
        function changeNum() {
            setNum(num + 1);
        }
        
        // React初始化渲染count后，useEffect执行setCount，又导致React的重新渲染
        // 如果不想num的变化也调用Effect，就将他提取到外部函数，这样React依赖检测就不会提醒你添加num作为依赖
        useEffect(() => {
            setCount(8);
            changeNum()
        }, [count])
        
        return <div onClick={() => setCount(count + 1)}></div>
    }
    

• React的DOM Diff算法实现渲染

  • 如果你在相同的位置使用相同的组件然后通过布尔值判断显示哪个，因为它们的DOM结构相同，会导致切换到另一个组件时组件不会进行初始化。（state不会重新执行初始化值）

  • 解决方案

    • 可以给在相同位置的两个组件添加唯一key，这样每次判断切换到另一个组件时，就会进行初始话

    • 可以两行判断，第一行布尔值为true就输出，第二行布尔值为false就输出。这样子由于DOM结构处于不同位置，也可以实现切换组件重新进行初始化

    • const Item = (title) => {
          const [count, setCount] = useState(0);
          return <div onClick={() => setState(count + 1)}>
          	{ title } : { count }
          </div>
      }
      
      export default function() {
          const [isHidden, setIsHidden] = useState(true);
          
          // 如果在为first组件点击了5次，那么当前的count会是5
          // 然后setIsHidden为false，将会渲染second组件，移除first组件
          // 组件中的title将会变为second，但是state值将仍是5，而不是初始化为0
          // 解决方案就是：3、4组合 或者 5、6组合 都会进行初始化
          return (
          	<div>
              	{isHidden 
                      ? <Item title="first" /> 
                      : <Item title="second" />
                  }
                  
                  {isHidden 
                      ? <Item key="3" title="third" /> 
                      : <Item key="4" title="fourth" />
                  }
                  {isHidden && <Item title="fifth" />}
                  {!isHidden && <Item title="sixth" />}
              </div>
          )
      }