reacthooks有什么用-创新互联

小编给大家分享一下react hooks有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司服务紧随时代发展步伐，进行技术革新和技术进步，经过十年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行成都网站建设、成都网站设计、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

React hooks是React16.8的新特性，可以让React函数组件具有状态，并提供类似componentDidMount和componentDidUpdate等生命周期方法。

我们大部分 React 类组件可以保存状态，而函数组件不能？并且类组件具有生命周期，而函数组件却不能？

React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16.6 出来的 React.memo函数。

React 16.8 新出来的Hooks可以让React 函数组件具有状态，并提供类似 componentDidMount和componentDidUpdate等生命周期方法。

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

下面介绍 React 默认提供的四个最常用的钩子。

useState()
useContext()
useReducer()
useEffect()

useState()：状态钩子

useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

本文前面那个组件类，用户点击按钮，会导致按钮的文字改变，文字取决于用户是否点击，这就是状态。使用useState()重写如下。

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  {buttonText};
}

demo地址：https://codesandbox.io/s/nifty-waterfall-4i2dq

上面代码中，Button 组件是一个函数，内部使用useState()钩子引入状态。

useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。

useContext()：共享状态钩子

如果需要在组件之间共享状态，可以使用useContext()。

现在有两个组件 Navbar 和 Messages，我们希望它们之间共享状态。

第一步就是使用 React Context API，在组件外部建立一个 Context。

const AppContext = React.createContext({});

组件封装代码如下。

上面代码中，AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。

const Messages = () => { const { username } = useContext(AppContext) return (

Messages

1 message for {username}

useContext is awesome!

const myReducer = (state, action) => { switch(action.type) { case('countUp'): return { ...state, count: state.count + 1 } default: return state; } }

function App() { const [state, dispatch] = useReducer(myReducer, { count: 0 }); return ( dispatch({ type: 'countUp' })}> +1

Count: {state.count}

); }

Loading ...

} return

You're viewing: {person.name}

Height: {person.height}

Mass: {person.mass}

}

const Person = ({ personId }) => { const [loading, person] = usePerson(personId); if (loading === true) { return

Loading ...

; } return (

You're viewing: {person.name}

Height: {person.height}

Mass: {person.mass}

); };

大橙子网站建设，新征程启航

reacthooks有什么用-创新互联

Messages

其他资讯