对于初学者来说，React 可能会让新手感到棘手。然而，掌握一些关键技巧和原理可以让成为资深 React 工程师变得简单多了。

大多数人认为它只在组件卸载时才执行，但其实并不完全是这样。

每次渲染后，上一次渲染结束时的清理回调函数会在进行下一个效果之前执行。

我们来看看一个例子：

function SomeComponent() {  
  const [count, setCount] = useState(0)  

  useEffect(() => {  
    console.log('当前的计数是', count)  
    return () => {  
      console.log('上一次的计数是', count)  
    }  
  })  

  return <button onClick={() => setCount(count + 1)}>点击这里</button>  
}

这会记录如下：

    // 组件挂载时  
    当前计数是 0  

    // 点击事件  
    上一次的计数是 0  
    当前计数是 1  

    // 点击事件  
    上一次的计数是 1  
    当前计数是 2  

    // 组件卸载时  
    上一次的计数是 2

这有助于创建“取消订阅后立即重新订阅”的模式，这也是useEffect的唯一用武之地。

当然，如果我们添加了依赖项，只有在依赖项发生变化时，这些部分才会被调用。

对于初级 React 开发者来说，常常会误用 useEffect。这样可能会让代码更复杂，导致闪烁或一些难以察觉的 bug。

最常见的情况是同步不同的 useState，实际上你只需要一个 useState 即可。

    function MyComponent() {  
      const [text, setText] = useState("Lorem ipsum dolor sit amet")  

      // 你不需要这样做！  
      const [trimmedText, setTrimmedText] = useState("Lorem ip...")  

      useEffect(() => {  
        setTrimmedText(text.slice(0, 8) + '...')  
      }, [text])  
    }  

    function MyBetterComponent() {  
      const [text, setText] = useState("Lorem ipsum dolor sit amet")  

      // 你可以这样写：  
      // 每当 text 发生变化时，trimmedText 会自动更新
      const trimmedText = text.slice(0, 8) + '...'  
    }

当元素的 key 属性发生变化时，该渲染过程不会被视为更新，而是被视为卸载并重新挂载一个新的组件实例对象，这将具有新的初始状态。

function Layout({ currentItem }) {  
  /* 当 currentItem 变化时，<EditForm/> 内部的任何状态自动重置为新项目的初始值 */  
  return (  
    <EditForm  
      item={currentItem}  
      key={currentItem.id}  
    />  
  )  
}

服务器的状态基本上是你数据库中的数据的一个快照，在页面加载期间，它存在于前端内存中。

通常由像 React-Query 或 Apollo 这样的服务器状态管理器来管理。

如果你将任何内容放入useState中，当查询刷新或有突变时，你的useState里的内容就不会更新。

ReactElement 仅表示一小段标记，而 ReactNode 可以是任何 React 可以渲染的内容，例如 ReactElement，也可以是像 string、number、boolean、array、null、undefined 等。

    // 这是一个React元素
    const a = <div/>

    // 例如这些是React节点
    1
    "hello"
    <div/>
    [2, <span/>]
    null

// 注释：React元素和React节点是React组件中的重要概念。React元素是描述如何构建DOM节点的数据结构，而React节点可以是元素、文本或null，它们是构建React组件的基础。

不想限制可以传递给该组件的子元素类型，就将 children 属性定义为 ReactNode。

JSX.Element 是 TypeScript 的一个内部功能（不是由 React 库定义的），主要面向库开发者。除此之外，它与 ReactElement 是等价的。