React 功能组件和 class 组件呈现方式不同吗？

Question

当我将 React 功能组件与某些状态管理器一起使用时（我正在使用 recoil.js）并且我尝试使用 React 挂钩更新状态，它仅在状态为 [=22= 时调用 useEffect ]与原始状态不同。当我迫不及待地关注组件如何重新渲染的堆栈溢出时，他们正在谈论 class 组件，以及它们在每次调用 setState 时如何渲染。这只是两种组件类型工作方式的区别，还是我只是误解了它？

这是我对函数组件的代码测试：

import React, {useEffect} from 'react'
import ReactDOM from 'react-dom'
import {atom, useRecoilState, RecoilRoot} from 'recoil'

ReactDOM.render(
    <React.StrictMode>
        <RecoilRoot>
            <App />
        </RecoilRoot>
    </React.StrictMode>,
    document.getElementById('root')
);

const testAtom = atom({
    key: "test",
    default: ""
});

function App(){
    return (
        <>
            <C1 />
            <C2 />
        </>
    );
}

function C1(){
    const [test, setTest] = useRecoilState(testAtom);
    
    useEffect(() => {
        console.log('effected', 'c1');
    });
    
    return (
        <div>
            <button onClick={() => {setTest('c1')}}>Click me</button>
        </div>
    );
}

function C2(){
    const [test, setTest] = useRecoilState(testAtom);
    
    useEffect(() => {
        console.log('effected', 'c2');
    });
    
    return (
        <div>
            <button onClick={() => {setTest('c2')}}>Click me</button>
        </div>
    );

}

运行这个useEffect只有在state改变的时候才会被调用，不仅仅是调用setTest的时候，这个人said otherwise对于class个组件

React doesn't compare state data. When setState is called, it marks the component as dirty (which means it needs to be re-rendered).

这是否意味着如果我将其设为 class 组件，它每次都会 conoslelog？

Answer 1

是也不是。我不会说“它们呈现方式不同”，但是在何时重新呈现组件的方式之间存在差异。我理解如何期望默认行为是相同的，但是，我也理解引入新的状态系统 (useState) 为开发人员提供了改进默认行为的机会。

我不知道后坐力的具体工作原理，但我认为它的行为至少类似于 useState 重新渲染组件。来自 documentation:

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

所以这证实了你的观察。

但让我明确一点：这不是函数组件的特征，这正是 useState 的工作方式。您可以开发自己的行为不同的状态管理挂钩。

现在正在寻找添加 class 组件，来自 setState documentation:

setState() will always lead to a re-render unless shouldComponentUpdate() returns false

关于shouldComponentUpdate：

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true.

第一部分不太清楚（“默认行为是在每次状态更改时重新渲染”，但设置相同的值是“更改”吗？ ), 但第二段说得很清楚。 shouldComponentUpdate returns true 默认情况下，因此组件将始终在调用 setState 时重新呈现。

如果您实现 shouldComponentUpdate 来调用 Object.is，您将复制 useState.

的行为

React 功能组件和 class 组件呈现方式不同吗？

Do react functional and class components render differently?

javascript

reactjs

recoiljs