React初学

React初学

react哲学

1. 将 UI 拆解为组件层级结构

2. 使用 React 构建一个静态版本（props传递数据，像传给函数的参数，单向数据流）

3. 发现 UI 精简且完整的 state 表示，state像组件的内存，追踪组件信息，根据交互改变

   • 随着时间推移保持不变的
   • 通过props从父组件传递的
   • 能给予已有state或props计算的。就不是state

4. 验证 state 应该被放置在哪里

   • 寻找每个基于state设定的组件，找它们最近且共同的父组件。
   • 通常情况下，可以直接放置 state 于它们共同的父组件。
   • 也可以将 state 放置于它们父组件上层的组件。
   • 如果找不到一个有意义拥有这个 state 的地方，单独创建一个新的组件去管理这个 state，并将它添加到它们父组件上层的某个地方。

5. 添加反向数据流，添加一个 onChange 事件处理器，使用其设置父组件的 state

默认导出和具名导出

语法	导出语句	导入语句
默认	export default function Button() {}	import Button from './Button.js';
具名	export function Button() {}	import { Button } from './Button.js';

React 提供了 “严格模式”，在严格模式下开发时，它将会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。

state

• 将 React 中所有的 state 都视为不可直接修改的。
• React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。
• 要在一个事件中多次更新某些 state，你可以使用 setNumber(n => n + 1) 更新函数
• 对 React 来说重要的是组件在 UI 树中的位置,而不是在 JSX 中的位置！

reducer

• 把 useState 转化为 useReducer：

  1. 通过事件处理函数 dispatch actions；
  2. 编写一个 reducer 函数，它接受传入的 state 和一个 action，并返回一个新的 state；
  3. 使用 useReducer 替换 useState；

ref

• 存储 timeout ID
• 你通过传递 <div ref={myRef}> 指示 React 将 DOM 节点放入 myRef.current。
• 通常，你会将 refs 用于非破坏性操作，例如聚焦、滚动或测量 DOM 元素。
• 默认情况下，组件不暴露其 DOM 节点。 您可以通过使用 forwardRef 并将第二个 ref 参数传递给特定节点来暴露 DOM 节点。
• 避免更改由 React 管理的 DOM 节点。
• 如果你确实修改了 React 管理的 DOM 节点，请修改 React 没有理由更新的部分。

useEffect

• useEffect 会把这段代码放到屏幕更新渲染之后执行
• 分离到渲染逻辑的计算过程之外
• 仅在严格模式下的开发环境中，React 会挂载两次组件，以对 Effect 进行压力测试。如果 Effect 因为重新挂载而中断，那么需要实现一个清理函数。