📄️ 使用Ref Value
当你希望组件“记住”某些信息,但又不想让这些信息触发新的渲染时,可以使用ref。
📄️ 使用Refs更新DOM
React 会自动更新 DOM 以匹配你的渲染输出,因此你的组件通常无需直接操作 DOM。
📄️ Effects
某些组件需要与外部系统同步。例如,你可能想根据React状态控制非React组件、建立服务器连接,或在组件出现在屏幕上时发送分析日志。Effects允许你在渲染后运行一些代码,从而使你的组件能够与React之外的系统同步。
📄️ 也许不需要Effect
Effect 是 React 范式中的一个"逃生舱"。它们允许你"跳出" React,将组件与外部系统(如非 React 小部件、网络或浏览器 DOM)同步。如果不涉及外部系统(例如,你只是想在某些 props 或 state 变化时更新组件的状态),那么你可能不需要使用 Effect。移除不必要的 Effect 可以使你的代码更易于理解、运行更快速,并且更不容易出错。
📄️ Effect的生命周期
Effect的生命周期与组件不同。组件可以挂载、更新或卸载,而Effect只能执行两个操作:开始同步某些内容,然后在稍后停止同步。如果Effect依赖于随时间变化的props和state,这个周期可能会多次发生。React提供了一个lint规则,用于检查你是否正确指定了Effect的依赖项。这确保了你的Effect与最新的props和state保持同步。
📄️ 自定义 hooks
React 提供了多个内置的 Hook,如 useState、useContext 和 useEffect。有时,你可能希望有一个用于更具体目的的 Hook:例如,用于获取数据、跟踪用户是否在线,或连接到聊天室。虽然你可能在 React 中找不到这些特定的 Hook,但你可以根据应用程序的需求创建自己的自定义 Hook。这种灵活性使得 React 开发更加强大和可扩展。