我希望在刚开始学习 React 时就知道的 3 个概念

当我偶然发现 React 时，我几乎对 JS 一无所知。当然，我的同学和互联网都告诉我，入门 React JS 需要一些 JavaScript 知识，但我还是抓住了这个机会。作为那种“边做边学”的人，我继续探索 JavaScript 世界以及 React 附带的 JSX。

这适用于初学者和同类人。

function App() {
  console.log("app")
  const [state, toggle] = useState(true);
  return (
    <div>
    <h2>{`${state}`}</h2>
    <button onClick={() => { toggle(!state) }}>Toggle</button>
    </div>
 )
}

我有一个标题和一个按钮来切换其内容。函数内部还有一个 console.log 文件，用于在每次状态改变和触发重新渲染时记录一条消息。
我预计每次点击按钮都会产生一条日志。但我注意到，每次点击按钮都会产生两条日志。

我继续前进，没有被这种行为所困扰。
后来，当我在一些更复杂的东西中注意到同样的行为时，它让我很烦。那时我才意识到这种行为只在开发中可见，而在生产中不可见。我在网上搜索，发现这是由于严格模式造成的。我注意到在 index.js 中，我的应用程序被包裹在内。
引用 ReactJS 文档本身的话：“严格模式无法自动为您检测副作用，但它可以通过使它们更确定一些来帮助您发现它们。这是通过故意双重调用以下函数来实现的：类组件构造函数、render 和 shouldComponentUpdate 方法。”

如果你正在使用 create-react-app ，你可能会注意到你的应用被包裹在 index.js 中。
所以，这就是问题所在。这就是为什么我每次渲染都会有两个日志。真希望我早知道这一点。想了解更多关于严格模式的信息，请点击此处。

2. 键
当渲染多个组件时，我们通常映射列表，例如，

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

React 使用键来优化性能。点击此处了解更多关于键的重要性。
官方文档指出：“键可帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素赋予键，以赋予元素稳定的标识。”
现在，一个显而易见的想法浮现在脑海中：我们可以使用数组索引作为键。但是，等等，再想一想，因为这不是推荐的方法。
想想如果列表被添加到前面会发生什么，因为 React 仅依赖键来决定是否应该更新 DOM。点击此处了解详情。本文使用一个非常好的文本输入示例演示了这个问题。

3. 陈旧状态

问题是，在某些情况下，你无法获取最新的状态。
这一点，我费了好大劲才搞明白。作为一个对闭包及其在 React 环境中的重要性一无所知的人，我不得不阅读大量关于 React 幕后内容的资料。
考虑一下这段代码，

function App() {

    const [state, toggle] = useState(0);

    useEffect(()=>{

    setInterval(()=>{
      console.log(`state ${state}`);
    },3000)

},[])
    return (
       <div>
       <h2>{`${state}`}</h2>
       <button onClick={() => { toggle(state+1) }}>Increase</button>
       </div>
)
}

点击按钮并更新状态后，日志中没有任何变化。日志显示初始状态为 0。请看下面的 GIF。

'为什么' 的答案不在于 React 而在于 JavaScript 本身。它与称为闭包的东西有关。在这里阅读有关闭包的信息。
这不是一个大问题，但想象一下将事件监听器附加到一个对象，在 useEffect 中并在其中获取陈旧状态。查看这个SO 答案，它展示了在 useEffect 中使用事件监听器的正确方法。
重要的是要知道，拥有基本的 JS 知识应该比拥有框架或库特定的
知识更重要。因为，无论你使用什么库，你仍然必须编写 JS 代码并处理与 JS 相关的问题。重要的是不要将自己局限于特定的框架/库，只有拥有强大的 JS 基础才有可能。
永远不要低估通过查看文档所获得的知识，尤其是当它们和 React 的一样好时。
感谢您阅读请给我买杯咖啡https://www.buymeacoffee.com/rubengabriel！