谁能帮助我了解每当状态发生变化时功能cmp如何重新渲染。
请参阅下文，例如
function App() {
const [count, updateCount] = useState(0);
return (
<div className="App">
<h1>{count}</h1>
<button onClick={() => updateCount(count + 1)}>Update</button>
</div>
);
}
如果我将其与基于类的 react 组件进行比较，那么我们在类中有渲染函数，我相信每当状态或 props 发生变化时，它都必须被触发(必须有生命周期函数链，其中之一是 this.render())
但是使用上面的代码结构App是一个功能组件，在 App 内部我们正在更改状态/计数，如何反应知道在 updateCount/setter 函数之后，App/(或其父函数)应该再次调用？我的意思是我们不会将应用程序函数的引用传递给使用状态权限。
在讨论钩子的不同之处之前，让我们看看类如何处理状态更新。
调用基类setState方法时，它会将状态更改排队。
this.updater.enqueueSetState(this, partialState, callback, 'setState');
此处定义了它使用updater对象。让我们看看enqueueSetState的实现。
首先，它使用getInstance函数获取fiber，该函数是广义命名的get函数的别名。
const fiber = getInstance(inst);
它的名字有点晦涩难懂，但它所做的只是获取一个对象实例(您的类组件)，并返回其_reactInternals属性值。
它创建一个update对象，其中payload是传递给setState的参数。然后，它会调度此更新对象，而不执行它，并标记需要使用scheduleUpdateOnFiber重新渲染组件。
const update = createUpdate(eventTime, lane);
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'setState');
}
update.callback = callback;
}
const root = enqueueUpdate(fiber, update, lane);
if (root !== null) {
scheduleUpdateOnFiber(root, fiber, lane, eventTime);
entangleTransitions(root, fiber, lane);
}
先前计划的更新队列在组件更新时进行处理(由setState触发的渲染，从我们的元素作为根开始)。
它调用updateClassInstance，既执行类的生命周期方法，又返回是否需要重新呈现组件。
shouldUpdate = updateClassInstance(
current,
workInProgress,
Component,
nextProps,
renderLanes,
);
https://github.com/facebook/react/blob/a8c9cb18b7e5d9eb3817272a1260f9f6b79815a2/packages/react-reconciler/src/ReactFiberClassComponent.new.js#L1142
processUpdateQueue(workInProgress, newProps, instance, renderLanes);
如果状态已更改，它将继续渲染组件。
钩
与在内部管理自己的状态的类组件相反，函数组件依赖于调用钩子来让 React "为您"存储状态。
每次调用useState(或内部依赖于存储值的任何其他钩子)都会将此状态添加到每个组件链表中。
React 完全依靠这个列表的顺序来检索后续渲染通道中每个钩子的正确值。这就是为什么您只能在顶层使用钩子，而不能在循环/条件中使用钩子。否则 React 无法知道哪些数据属于哪个钩子调用。
每个 React 钩子都有 2 个实现，它们在内部切换。一个用于组件装载时间，另一个用于更新。这是有道理的，因为两种情况的逻辑完全不同。
在第一次渲染时，它使用mountState.
function mountState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
const hook = mountWorkInProgressHook();
// ...
mountWorkInProgressHook是创建钩子调用在链表中的条目的位置。
if (workInProgressHook === null) {
// This is the first hook in the list
currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
} else {
// Append to the end of the list
workInProgressHook = workInProgressHook.next = hook;
}
接下来mountState根据useState的参数初始化状态。
if (typeof initialState === 'function') {
// $FlowFixMe: Flow doesn't like mixed types
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
它还创建一个更新队列，类似于类组件的内部更新队列。
const queue: UpdateQueue<S, BasicStateAction<S>> = {
pending: null,
lanes: NoLanes,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: (initialState: any),
};
hook.queue = queue;
您返回的setState函数会在您调用它时将参数放入队列中。
在更新渲染时，useState使用updateState，它在内部调用updateReducer。它处理队列中的所有更新。
最后，要在调用setState时触发渲染，在将更新添加到队列后，它将元素调度为需要重新渲染的根。源
const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
if (root !== null) {
const eventTime = requestEventTime();
scheduleUpdateOnFiber(root, fiber, lane, eventTime);
entangleTransitionUpdate(root, queue, lane);
}
比较
对于大多数部分，类和功能组件最终在这里做同样的事情。
- 向队列添加更新
- 将元素标记为需要渲染
- 在呈现组件时，在使用状态的逻辑之前应用排队状态更新
但是，它们对每件事都使用单独的实现，从而导致细微的差异。
状态究竟何时更新？
对于类组件，您的状态总是会在调用类的render方法之前进行更新。
对于带有钩子的函数组件，状态更新会在调用每个钩子时发生。
虽然这显然是一种不同的方法，但这种差异并没有太多的实际意义。在这两种情况下，状态更新都会及时发生。
渲染函数中的代码会对您的状态做出反应。人们喜欢说 UI 是组件状态的可视化表示形式。
在 Hooks 发布之前，没有办法将 React 的内部状态放在函数组件中。你可以使用Redux，MobX或其他第三方库来管理你的状态，但无法连接到组件的本地状态。
渲染函数的行为与在有状态类组件中的行为完全相同。