Reactjs 状态更改是否卸载功能组件

发布于10月01日

我知道状态的改变会触发组件的重新呈现.所以我的问题是，在重新渲染过程中，状态更改是否也会卸载功能组件？

main.jsx个

const Fullnote = () => {
    const notes = useContext(NotesContext);
    const [note, setNote] = useState(INITIAL_VALUE);
    const { noteId } = useParams();

    useEffect(() => {
        notes.forEach(data => {
            if (data.id === noteId) setNote(data)
        });
  
        return ( () => console.log("return"))

    });


    return (
          <>
              ......
          </>
    )

}

在上面代码片段中，我们从上下文中获取对象array.该数组中的每个对象都具有唯一的ID.我们还从url中获取了Note ID.一旦组件挂载useEffect运行，我们就设置与note ID匹配的状态.

will console.log("return") run after setState()?个

推荐答案

所以我的问题是，在重新渲染过程中，状态更改是否也会卸载功能组件？

Console.log("Return")会在setState()之后运行吗？

这是两个不同的问题:它会下台吗？否，组件不会卸载.只有父组件才能使此组件卸载.它将通过停止呈现<Fullnote />或通过更改<Fullnote key={something} />上的密钥来实现这一点

然而，它却记录了will次"返回".在您的组件渲染之后，它将运行效果，在它运行效果之前，它将运行来自上一次渲染效果的清理代码.因此，上一次渲染的清理代码将运行，并记录"返回".

如果希望限制useEffect的运行时间，可以提供一个依赖项数组作为useEffect的第二个参数.如果数组中的任何值都没有更改，则效果不会重新运行，因此不需要拆除先前的效果.

useEffect(() => {
  // ...
}, [notes, noteId]);

另外，如果你呼叫setNote的唯一地方是在useEffect中，那么note不应该是一个单独的州.相反，您可以在渲染过程中计算note.这将使代码更简洁、更有性能(因为它不再需要双重呈现)，并将消除值不同步的时间点.

const Fullnote = () => {
  const notes = useContext(NotesContext);
  const { noteId } = useParams();
  const note = notes.find(data => data.id === nodeId);

  return (
    <>
      ......
    </>
  )
}

(如果您确实在您省略的代码中呼叫了setNote，那么这个建议将不适用)

Reactjs 状态更改是否卸载功能组件

推荐答案

Reactjs相关问答推荐

如何使用json将购物车数组传递到后台API

404使用GitHub操作部署Next.js应用程序时出错

在react.js的条形图中获取错误&unfined是不可迭代的

关于同一位置的不同组件实例的react S规则被视为相同组件

无法将react 路由状态从路由传递给子组件

在url中使用MongoDB对象ID被认为是不好的做法？

如何通过reactjs正确显示记录

根据处于react 状态的数组的名称键，将新对象添加到嵌套的对象数组中

React 错误：只能用作元素的子元素，从不直接渲染.请将您的包裹在中

设置自定义形状的纹理

Mui Datepicker 设置了错误的日期

当我在 React Router Dom 中使用两个参数并直接在页面上导航时，数据获取没有发生

使用 react pro 侧边栏展开折叠菜单

如何处理页面加载时发生的 reactjs 错误？

使用 React Router v6 监听来自不同组件的组件状态变化

如何从 graphql/apollo 中的缓存中清除多个查询

React JS：如何判断用户使用的是浏览器 url 还是桌面 electron

react 页面更新

axios post方法中的请求失败，状态码为500错误

React 似乎在触发另一个组件时重新渲染了错误的组件