6-3-提前检测减少不必要的更新

2025-07-10 85 阅读1分钟

本节内容主要是对mini react做一个优化。

现状app.js一开始是bar点击设置成bar还是会重复渲染

import React from "./core/React.js";

function Foo() {
  console.log('fooo')
  const [bar, setBar] = React.useState('bar')
  function handleClick() {
    setBar('bar')
  }

  return (
    <div>
      {bar}
      <button onClick={handleClick}>click</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Foo />
    </div>
  );
}

export default App;

进行检测

function useState(initial) {
    // ...

    function setState(action) { 
        //...
        const eagerState = typeof action === 'function' ? action(stateHook.state) : action
        if(eagerState === stateHook.state){
            return
        }
    }
    // ...
}