关于 React 中 useEffect 使用问题

前言

最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的，感到好奇，因为这样会导致应用重新绘制一次，这样才复杂场景下会对应用有一定的性能影响。为了验证自己猜想是否正确做了一下实践。这里的 React 是官方 16.12.0的源码。

优化前

import * as React from './react-source/packages/react'
import * as ReactDOM from './react-source/packages/react-dom'

const root = document.getElementById('root');

function Foo({number}) {const [number2, setNumber2] = React.useState(0);React.useEffect(() => {setNumber2( number + 1)}, [number])return <div> {number2 % 2 === 0 && <div>{number2}</div>}<button onClick={() => setNumber2(number2 + 1)}>更新 number2</button></div>
}

function App() {const [number1,setNumber1] = React.useState(1);return <> {number1 % 2 === 0&&<div>{number1}</div>}<Foo number={number1}/>