前言
最近看了一下 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}/>