高级：React 中的生命周期方法和 Hooks

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签生命周期

作为一名高级开发人员，您不仅需要理解而且能够熟练地实现先进的 react 概念，以构建健壮、可维护和可扩展的应用程序。本文深入探讨了基本钩子、自定义钩子和高级钩子模式，例如使用 usereducer 管理复杂状态以及使用 usememo 和 usecallback 优化性能。

react hook 简介

react hooks 在 react 16.8 中引入，允许您在不编写类的情况下使用状态和其他 react 功能。 hooks 提供了一种更具功能性和模块化的方法来处理组件逻辑。

hooks 的主要优点

更简洁的代码： hooks 使功能组件能够处理状态和生命周期方法，从而产生更具可读性和可维护性的代码。
可重用性：自定义挂钩允许您跨多个组件提取和重用有状态逻辑。
简单性： hooks 提供了更简单的 api 来管理组件状态和副作用。

必备挂钩

使用状态

usestate 是一个钩子，可让您向功能组件添加状态。

示例：

import react, { usestate } from 'react';const counter = () =&gt; {  const [count, setcount] = usestate(0);  return (    <div>      <p>you clicked {count} times</p>      <button onclick="{()"> setcount(count + 1)}&gt;click me</button>    </div>  );};export default counter;

在此示例中，usestate 将 count 状态变量初始化为 0。setcount 函数在单击按钮时更新状态。

使用效果

useeffect 是一个钩子，可让您在功能组件中执行副作用，例如获取数据、直接与 dom 交互以及设置订阅。它结合了类组件中多个生命周期方法的功能（componentdidmount、componentdidupdate 和 componentwillunmount）。

示例：

import react, { usestate, useeffect } from 'react';const datafetcher = () =&gt; {  const [data, setdata] = usestate(null);  useeffect(() =&gt; {    fetch('https://api.example.com/data')      .then(response =&gt; response.json())      .then(data =&gt; setdata(data));  }, []);  return (    <div>      {data ? <pre class="brush:php;toolbar:false">{json.stringify(data, null, 2)}

: 'loading...'} );};export default datafetcher;

在此示例中，useeffect 在组件挂载时从 api 获取数据。

使用上下文

usecontext 是一个钩子，可让您访问给定上下文的上下文值。

示例：

import react, { usecontext } from 'react';const themecontext = react.createcontext('light');const themedcomponent = () =&gt; {  const theme = usecontext(themecontext);  return <div>the current theme is {theme}</div>;};export default themedcomponent;

在此示例中，usecontext 访问 themecontext 的当前值。

使用reducer

usereducer 是一个钩子，可让您管理功能组件中的复杂状态逻辑。它是 usestate 的替代品。

示例：

import react, { usereducer } from 'react';const initialstate = { count: 0 };const reducer = (state, action) =&gt; {  switch (action.type) {    case 'increment':      return { count: state.count + 1 };    case 'decrement':      return { count: state.count - 1 };    default:      return state;  }};const counter = () =&gt; {  const [state, dispatch] = usereducer(reducer, initialstate);  return (    <div>      <p>count: {state.count}</p>      <button onclick="{()"> dispatch({ type: 'increment' })}&gt;increment</button>      <button onclick="{()"> dispatch({ type: 'decrement' })}&gt;decrement</button>    </div>  );};export default counter;

在这个例子中，usereducer通过reducer函数来管理计数状态。

定制挂钩

自定义挂钩让您可以跨多个组件重用有状态逻辑。自定义钩子是使用内置钩子的函数。

示例：

import { usestate, useeffect } from 'react';const usefetch = (url) =&gt; {  const [data, setdata] = usestate(null);  useeffect(() =&gt; {    fetch(url)      .then(response =&gt; response.json())      .then(data =&gt; setdata(data));  }, [url]);  return data;};const datafetcher = ({ url }) =&gt; {  const data = usefetch(url);  return (    <div>      {data ? <pre class="brush:php;toolbar:false">{json.stringify(data, null, 2)}

: 'loading...'} );};export default datafetcher;

在此示例中，usefetch 是一个自定义钩子，用于从给定 url 获取数据。

高级钩子模式

使用 usereducer 管理复杂状态

当处理涉及多个子值的复杂状态逻辑或当下一个状态依赖于前一个状态时，usereducer 可能比 usestate 更合适。

示例：

import react, { usereducer } from 'react';const initialstate = { count: 0 };const reducer = (state, action) =&gt; {  switch (action.type) {    case 'increment':      return { count: state.count + 1 };    case 'decrement':      return { count: state.count - 1 };    default:      return state;  }};const counter = () =&gt; {  const [state, dispatch] = usereducer(reducer, initialstate);  return (    <div>      <p>count: {state.count}</p>      <button onclick="{()"> dispatch({ type: 'increment' })}&gt;increment</button>      <button onclick="{()"> dispatch({ type: 'decrement' })}&gt;decrement</button>    </div>  );};export default counter;

在这个例子中，usereducer通过reducer函数来管理计数状态。

使用 usememo 和 usecallback 优化性能

使用备忘录

usememo 是一个钩子，它可以记忆计算值，仅当依赖项之一发生变化时才重新计算它。它通过防止每次渲染时进行昂贵的计算来帮助优化性能。

示例：

import react, { usestate, usememo } from 'react';const expensivecalculation = ({ number }) =&gt; {  const computefactorial = (n) =&gt; {    console.log('computing factorial...');    return n  computefactorial(number), [number]);  return <div>factorial of {number} is {factorial}</div>;};const app = () =&gt; {  const [number, setnumber] = usestate(5);  return (    <div>      <input type="number" value="{number}" onchange="{(e)"> setnumber(parseint(e.target.value, 10))}      /&gt;      <expensivecalculation number="{number}"></expensivecalculation></div>  );};export default app;

在此示例中，usememo 确保仅当数字发生变化时才重新计算阶乘计算。

使用回调

usecallback 是一个用于记忆函数的钩子，防止在每次渲染时重新创建该函数，除非其依赖项之一发生更改。它对于将稳定的函数传递给依赖引用相等的子组件很有用。

示例：

import React, { useState, useCallback } from 'react';const Button = React.memo(({ onClick, children }) =&gt; {  console.log(`Rendering button - ${children}`);  return <button onclick="{onClick}">{children}</button>;});const App = () =&gt; {  const [count, setCount] = useState(0);  const increment = useCallback(() =&gt; setCount((c) =&gt; c + 1), []);  return (    <div>      <button onclick="{increment}">Increment</button>      <p>Count: {count}</p>    </div>  );};export default App;

在此示例中，usecallback 确保仅在其依赖项发生变化时才重新创建增量函数，从而防止 button 组件不必要的重新渲染。

结论

掌握 react hooks 和生命周期方法对于构建健壮且可维护的应用程序至关重要。通过理解和利用 usestate、useeffect、usecontext 和 usereducer 等钩子，以及自定义钩子等高级模式以及 usememo 和 usecallback 的性能优化，您可以创建高效且可扩展的 react 应用程序。作为一名高级开发人员，这些技能将显着增强您开发和维护高质量 react 应用程序的能力，使您成为团队的宝贵资产。

文章推荐