前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react hooks api

react hooks api

作者头像
一粒小麦
发布2020-06-16 14:37:12
2.7K0
发布2020-06-16 14:37:12
举报
文章被收录于专栏:一Li小麦

react hooks api

hooks API是 React 16.8的"新增"功能(16.8更新于2年前)。官网是这么说的:

•你可用可不用•完全向后兼容•不打算移除旧有的class组件

借助hook,你可以抽离业务,写出更加“纯粹”的代码。但是坊间都说,hooks API是 React 的未来。

1.组件类的缺点

React 的核心是组件。v16.8 版本之前,组件的标准写法是类(class)。

如果让你写一个反映按钮点击状态的界面,用组件类来写是这样的:

代码语言:javascript
复制
import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

这个组件类仅仅是一个按钮,但可以看到,它的代码已经很"重"了。真实的 React App 由多个类按照层级,一层层构成,复杂度成倍增长。再加入 Redux,就变得更复杂。

Hooks的出现是为了解决 React 长久以来存在的一些问题:

带组件状态的逻辑很难重用:为了解决这个问题,需要引入render props或higher-order components这样的设计模式,如react-redux提供的connect方法。这种方案不够直观,而且需要改变组件的层级结构,极端情况下会有多个wrapper嵌套调用的情况。——Hooks可以在不改变组件层级关系的前提下,方便的重用带状态的逻辑。•复杂组件难于理解:大量的业务逻辑需要放在componentDidMount和componentDidUpdate等生命周期函数中,而且往往一个生命周期函数中会包含多个不相关的业务逻辑,如日志记录和数据请求会同时放在componentDidMount中。另一方面,相关的业务逻辑也有可能会放在不同的生命周期函数中,如组件挂载的时候订阅事件,卸载的时候取消订阅,就需要同时在componentDidMount和componentWillUnmount中写相关逻辑。——Hooks可以封装相关联的业务逻辑,让代码结构更加清晰。•难于理解的 Class 组件:JS 中的this关键字让不少人吃过苦头,它的取值与其它面向对象语言都不一样,是在运行时决定的。为了解决这一痛点,才会有剪头函数的this绑定特性。另外 React 中还有Class Component和Function Component的概念,什么时候应该用什么组件也是一件纠结的事情。代码优化方面,对Class Component进行预编译和压缩会比普通函数困难得多,而且还容易出问题。

Hooks可以在不引入 Class 的前提下,使用 React 的各种特性。

Redux 的作者 Dan Abramov 总结了组件类的几个缺点。

•大型组件很难拆分和重构,也很难测试。•业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。•组件类引入了复杂的编程模式,比如 render props 和高阶组件。

2、函数组件

React 团队希望,组件不要变成复杂的容器,最好只是数据流的管道。开发者根据需要,组合管道即可。组件的最佳写法应该是函数,而不是类。

React 早就支持函数组件,下面就是一个例子。

代码语言:javascript
复制
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

但是,这种写法有重大限制,必须是纯函数,不能包含状态,也不支持生命周期方法,因此无法取代类。

React Hooks 的设计目的,就是加强版函数组件,完全不使用"类",就能写出一个全功能的组件。


3、Hook 的含义

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

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

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

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

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

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

3.1 useState():状态钩子

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

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

代码语言:javascript
复制
import React, { useState } from "react";

export default function  Button()  {
  // 定义状态(useState的参数),以及改变状态的方法
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  // 调用`setButtonText`改变状态
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }

  return  <button  onClick={handleClick}>{buttonText}</button>;
}

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

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

3.2 useContext():共享状态钩子

如果需要在组件之间共享状态,可以使用useContext()。useContext可以很方便的去订阅 context 的改变,并在合适的时候重新渲染组件。

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

代码语言:javascript
复制
<div className="App">
  <Navbar/>
  <Messages/>
</div>

根据react的哲学,所有的状态应该从顶层传入——使用hooks也不例外,第一步就是使用 React Context API,在组件外部建立一个 Context。

代码语言:javascript
复制
// 创建状态容器:React.createContext
const AppContext = React.createContext({});

组件封装代码如下。

代码语言:javascript
复制
// 容器组件:通过AppContext.Provider包裹
const App = function () {
    return (<AppContext.Provider
                value={{ username: 'djtao' }}>
                <div className="App">
                    <Navbar />
                    <Messages />
                </div>
            </AppContext.Provider>);
}

如果子组件要用username,只需在组件内解构声明即可:

代码语言:javascript
复制
const { useContext } = React;
const Navbar = function () {
  // 获取状态
  const { username } = useContext(AppContext);
  return (<div>
      <div>Nav:hello, <span style={{textDecoration:'underline'}}>{username}</span></div>
  </div>)
}

// message子组件
const Messages = function () {
  const { username } = useContext(AppContext);
  return (<div>
      <div>Messages:1 message for <span style={{textDecoration:'underline'}}>{username}</span></div>
  </div>)
}

3.3 useReducer():action 钩子

React 本身不提供状态管理功能,通常需要使用外部库。这方面最常用的库是 Redux

Redux 的核心概念是,组件发出 action 与状态管理器通信。状态管理器收到 action 以后,使用 Reducer 函数算出新的状态,Reducer 函数的形式是

代码语言:javascript
复制
(state, action) => newState。

useReducers()钩子用来引入 Reducer 功能:

代码语言:javascript
复制
const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法,它接受 Reducer 函数和状态的初始值作为参数,返回一个数组。数组的第一个成员是状态的当前值,第二个成员是发送 action 的dispatch函数。

凡是涉及到状态管理,都使用计数器为例子。

代码语言:javascript
复制
// 定义一个reducer
const reducer = function (state, action) {
  switch (action.type) {
    case 'increase':
      return {
        ...state,
        count: state.count + 1
      };
    case 'decrease':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

组件代码如下。

代码语言:javascript
复制
const { useReducer } = React;
const App = function () {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  const decreaseAction = () => {
    dispatch({ type: 'decrease' });
  };

  const increaseAction = () => {
    dispatch({ type: 'increase' });
  };

  return (<div style={{ display: 'flex' }}>
    <button onClick={decreaseAction}> - </button>
    <p>{state.count}</p>
    <button onClick={increaseAction}> + </button>
  </div>)
}

那么一个计数器就做好了。

由于 Hooks 可以提供共享状态和 Reducer 函数,所以它在这些方面可以取代 Redux。这对组件层级很深的场景特别有用,不需要一层一层的把 state 和 callback 往下传。

但是,它没法提供中间件(middleware)和时间旅行(time travel),如果你需要这两个功能,还是要用 Redux。

3.4 useEffect():副作用钩子

useEffect()用来引入具有副作用的操作,副作用最常见的就是:网络请求、订阅某个模块或者 DOM 操作。useEffect会在每次 DOM 渲染后执行,不会阻塞页面渲染。它同时具备componentDidMount、componentDidUpdate和componentWillUnmount三个生命周期函数的执行时机。

useEffect()的用法如下。

代码语言:javascript
复制
useEffect(()  =>  {
  // Async Action
}, [dependencies]);

上面用法中,useEffect()接受两个参数。第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,只要这个数组发生变化,useEffect()就会执行。第二个参数可以省略,这时每次组件渲染时,就会执行useEffect()。

当useEffect的返回值是一个函数的时候,React 会在下一次执行这个副作用之前执行一遍清理工作,整个组件的生命周期流程可以这么理解:

组件挂载 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 组件卸载

下面看一个模拟请求数据的例子:页面加载进来,请求数据,替换loading状态,填充内容:

代码语言:javascript
复制
const fakeUserInfo = {
  '1': {
    name: 'djtao',
    job: 'Frontend Programmer'
  },
  '2': {
    name: 'dangjingtao',
    job: 'coder'
  }
}

const { useState, useEffect } = React;
const App = function ({ id }) {
  const [userInfo, setUserInfo] = useState({ name: '', job: '' });
  const [loading, setLoading] = useState(true);

  const getData = (_id) => {
    return fakeUserInfo[_id] ? fakeUserInfo[_id] : {};
  }

  useEffect(() => {
    setLoading(true);
    window.setTimeout(() => {
      const data = getData('1');
      setUserInfo(data);
      setLoading(false);
    }, 1000);
  }, [id])


  if (loading === true) {
    return <p>Loading ...</p>
  }

  return (<ul>
    <li>Name: {userInfo.name}</li>
    <li>Job: {userInfo.job}</li>
  </ul>);
}

这个例子中,经过1s后切换到“请求到”的数据。

3.5 自定义hook

自定义 Hook 的命名有讲究,必须以use开头,在里面可以调用其它的 Hook。入参和返回值都可以根据需要自定义,没有特殊的约定。使用也像普通的函数调用一样,Hook 里面其它的 Hook(如useEffect)会自动在合适的时候调用:

在3.4的例子中,完全可以进一步封装。定义一个usePersonInfo,返回对应的loading状态。

代码语言:javascript
复制
const useUserInfo = ({id}) => {
  const [userInfo, setUserInfo] = useState({ name: '', job: '' });
  const [loading, setLoading] = useState(true);

  const getData = (_id) => {
      return fakeUserInfo[_id] ? fakeUserInfo[_id] : {};
  }

  useEffect(() => {
      setLoading(true);
      window.setTimeout(() => {
          const data = getData(id);
          setUserInfo(data);
          setLoading(false);
      }, 1000);
  }, [id]);

  return {userInfo,loading};
}

然后App组件就可以很轻松地使用这些组件了。

代码语言:javascript
复制
const App = function () {
  const {userInfo,loading}=useUserInfo({id:'1'});

  if (loading === true) {
      return <p>Loading ...</p>
  }

  return (<ul>
      <li>Name: {userInfo.name}</li>
      <li>Job: {userInfo.job}</li>
  </ul>);
}

使用 Hooks 的时候必须遵守 2 条规则:

只能在代码的第一层调用 Hooks,不能在循环、条件分支或者嵌套函数中调用 Hooks。

只能在Function Component或者自定义 Hook 中调用 Hooks,不能在普通的 JS 函数中调用。

Hooks 的设计极度依赖其定义时候的顺序,如果在后序的 render 中 Hooks 的调用顺序发生变化,就会出现不可预知的问题。上面 2 条规则都是为了保证 Hooks 调用顺序的稳定性。为了贯彻这 2 条规则,React 提供一个 ESLint plugin 来做静态代码检测:eslint-plugin-react-hooks。


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-06-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一Li小麦 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • react hooks api
    • 1.组件类的缺点
      • 2、函数组件
        • 3、Hook 的含义
          • 3.1 useState():状态钩子
          • 3.2 useContext():共享状态钩子
          • 3.3 useReducer():action 钩子
          • 3.4 useEffect():副作用钩子
          • 3.5 自定义hook
      相关产品与服务
      容器服务
      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档