React的主要概念||反应

在 React.js 中，有多种方法可用于管理组件、处理生命周期事件和使用钩子。下面，我将最重要的方法分为不同的部分：

1. 组件生命周期方法（类组件）

在 React 类组件 中，您可以重写多种生命周期方法以在组件生命周期中的特定时间运行代码：

安装阶段（初始化组件）

• 构造函数()

  • 在组件挂载之前调用。
  • 对于初始化状态或绑定事件处理程序很有用。

• static getDerivedStateFromProps(props, state)

  • 在渲染之前调用，无论是在初始安装还是后续更新时。
  • 允许根据 props 更新状态。

• 渲染()

  • 类组件中唯一必需的方法。
  • 应该返回 React 元素，这些元素将被渲染到 DOM。

• componentDidMount()

  • 组件安装后立即调用。
  • 通常用于获取数据、设置订阅或进行 API 调用。

更新阶段（由于 props 或 state 的变化而重新渲染）

• static getDerivedStateFromProps(props, state)

  • （也在更新期间调用）用于根据 props 更新状态。

• shouldComponentUpdate(nextProps, nextState)

  • 确定是否需要重新渲染。
  • 可用于通过防止不必要的渲染来优化性能。

• 渲染()

  • （更新期间再次调用）

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 在虚拟 DOM 的更改应用于实际 DOM 之前调用。
  • 对于在更新之前捕获信息（如滚动位置）很有用。

• componentDidUpdate(prevProps, prevState, snapshot)

  • 更新发生后立即调用。
  • 对于在组件更新后执行操作很有用（例如，根据 prop 更改进行 API 调用）。

卸载阶段（移除组件之前进行清理）

• componentWillUnmount()
  • 在组件卸载和销毁之前调用。
  • 对于清理订阅、计时器或事件侦听器很有用。

错误处理

• componentDidCatch（错误，信息）
  • 如果在渲染期间、生命周期方法或任何子组件的构造函数中出现错误，则调用。
  • 对于记录错误和显示后备 UI 很有用。

2. React Hooks（函数组件）

Hooks 是 React 16.8 中的新增功能，让您无需编写类即可使用状态和其他 React 功能。

基本挂钩

• useState(初始状态)
  • 允许您向功能组件添加状态。
  • 返回一个状态变量和一个更新它的函数。

  const [count, setCount] = useState(0);

• useEffect（回调，依赖项）
  • 类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
  • 用于副作用，如数据获取、订阅或手动更改 DOM。

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(上下文)
  • 允许您订阅 React 上下文，而无需嵌套 Consumer 组件。

  const value = useContext(MyContext);

额外的钩子

• useReducer（reducer，initialState）
  • useState 的替代方案，用于管理更复杂的状态逻辑。

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback（回调，依赖项）
  • 返回回调函数的记忆版本，对于优化依赖引用相等的子组件很有用。

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo（创建，依赖项）
  • 返回一个记忆值，用于优化昂贵的计算。

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(初始值)
  • 返回一个可变的引用对象，该对象在渲染之间持续存在。
  • 对于访问 DOM 元素或存储可变值很有用。

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, 依赖项)
  • 自定义在使用 ref 和forwardRef 时暴露的实例值。

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect（回调，依赖项）

  • 与 useEffect 类似，但在所有 DOM 突变后同步触发。
  • 对于从 DOM 读取布局并同步重新渲染很有用。

• useDebugValue(值)

  • 可用于在 React DevTools 中显示自定义挂钩的标签。

  const [count, setCount] = useState(0);

3. 事件处理方法

React 提供了处理事件的方法，与常规 DOM 事件处理类似，但有一些区别：

• onClick
• onChange
• 提交
• 焦点
• onBlur
• onKeyPress

示例：

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. 其他 React 方法

这些是您可能会发现有用的其他方法：

• React.createRef()

  • 用于在类组件中创建引用。

• React.forwardRef()

  • 将引用传递给子组件。

• React.memo(组件)

  • 一个高阶组件，如果 props 没有改变，它会阻止重新渲染。

• React.lazy()

  • 用于代码分割和延迟加载组件。

• 反应.悬念

  • 与 React.lazy() 结合使用，在加载惰性组件时显示回退。

5. React Router 方法（用于路由）

• useNavigate()（React Router v6）
• useParams()
• useLocation()
• useMatch()

示例：

  const value = useContext(MyContext);

6. 道具类型和默认道具

• propTypes

  • 用于验证传递给组件的 props 类型。

• defaultProps

  • 用于设置 props 的默认值。

示例：

  const [state, dispatch] = useReducer(reducer, initialState);

结论

• 类组件更传统，使用生命周期方法。
• 功能组件利用钩子，并且由于其简单性和性能优势而在现代React开发中通常是首选。

当您需要对组件生命周期进行细粒度控制时，请使用类组件；当您想要更简单、更清晰的 API 时，请使用钩子。

以上是React的主要概念||反应的详细内容。更多信息请关注PHP中文网其他相关文章！