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

百变鹏仔 3天前 #JavaScript

文章标签生命周期

作为中级开发人员，理解并有效使用 react hooks 和生命周期方法对于构建健壮、可维护和可扩展的应用程序至关重要。本文将深入探讨基本钩子、自定义钩子和高级钩子模式，例如使用 usereducer 管理复杂状态以及使用 usememo 和 usecallback 优化性能。

react hook 简介

react hooks 允许您在不编写类的情况下使用状态和其他 react 功能。 react 16.8 中引入的钩子为状态管理和生命周期方法提供了一种更简单、更实用的方法。

hooks 的主要优点

更简单的代码： hooks 使您能够直接在功能组件中使用状态和生命周期方法，从而使代码更具可读性和可维护性。
重用逻辑：自定义挂钩允许您跨多个组件提取和重用有状态逻辑。
增强的功能组件： hooks 提供了类组件的所有功能，例如管理状态和副作用，而无需使用类。

必备挂钩

使用状态

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 应用程序的能力，使您成为团队的宝贵资产。

文章推荐