时间戳

首页 > 解决方案 > React 更新了什么？

javascript - React 更新了什么？

问题描述

我是 React 新手，每次 state 或 props 改变时更新什么我有点困惑。例如：

const Foo = props => {
  const [someState, setSomeState] = useState(null)

  let a
  useEffect(() => {
    a = 'Some fetched data'
  }, [])
}

现在，如果状态（即someState）或道具得到更新，它是否会再次通过函数运行，从而导致a未定义？是否只有依赖于 state/props 的 JSX 元素和使用它们的钩子会受到影响？具体有什么变化？

标签： javascriptreactjs

解决方案

要了解它如何state影响您的组件，您可以在 Stackblitz 上查看此示例。它向您展示了当状态更改时组件的局部变量如何作用。当组件接收到新的 prop 时，此行为完全相同。这是以防万一的代码：

import React, { Component } from "react";
import { render } from "react-dom";

const App = () => {
  const [state, setState] = React.useState('default');
  
  // see how the displayed value in the viewchanges after the setTimeout
  let a = Math.floor(Math.random() * 1000); 

  React.useEffect(() => {
    a = "new a"; // Does nothing in the view
    setTimeout(() => setState("hello state"), 2000);
  }, []);

  return (
    <div>
      {a} - {state}
    </div>
  );
};

render(<App />, document.getElementById("root"));

你可以看到的是：

  • a用随机值初始化并显示在视图中
  • useEffect被触发。a已编辑但不会重新渲染您的组件
  • 2秒后，setState被调用，更新状态state
  • 此时，a值已更改为新的，因为您的组件在状态更新后重新渲染。state也改变了你给它的东西

所以对于你的问题：

如果状态（即 someState）或道具得到更新，它是否会再次通过函数运行，从而导致未定义？是否只有依赖于 state/props 的 JSX 元素和使用它们的钩子会受到影响？具体有什么变化？

答案是肯定的，它确实再次通过函数运行，并且已经更新的 state/props 在 JSX 中更新。局部变量 likea将被设置为其默认值。

推荐阅读