这个例子里的 component 总是重新挂载

[sillydaddy]

const Main = (props)=>{
    var [somevar, setSomevar] = useState<number>(0);
    const SubComponent = (props)=>{
        var [count, setCount] = useState<number>(0);
        useEffect(()=>{
            console.log("SubComponent mounted!");
            return ()=>{console.log("SubComponent dis mounted");};
        }, [props]);
        return (<div>
                <div>count:{count}</div>
                <button onClick={()=>setCount(count+1)}>count++</button>
            </div>);
    }
  
    return (<div>
        <div>somevar:{somevar}</div>
        <button onClick={()=>setSomevar(somevar+1)}>somevar++</button>
        <SubComponent>
        </SubComponent>
    </div>);
}

每次点击 somevar++，SubComponent 都会重新 mount 和 unmount ，而且 count 也会清零。 点击 count++不会导致重新挂载。

什么决定了重新挂载呢？这里的父子组件结构，并没有变化啊。

[theohateonion]

@sillydaddy 或者换一种理解，每次函数都会重新执行。所以 subComponent 每次 state 变化都会是新的。

[ragnaroks]

@sillydaddy
不是 lambda 表达式每次都是生成一个新的实例，而是你的例子中，"somevar" 是一个被引用的变量。

<button onClick={()=>setSomevar(somevar + 1)}>somevar++</button> 可能会重新渲染。

但 <button onClick={()=>setSomevar(451)}>somevar++</button> 不会。