react hooks api

react hooks api

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

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

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

1.组件类的缺点

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

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

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 早就支持函数组件,下面就是一个例子。

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()重写如下。

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,我们希望它们之间共享状态。

<div className="App">
  <Navbar/>
  <Messages/>
</div>

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

// 创建状态容器:React.createContext
const AppContext = React.createContext({});

组件封装代码如下。

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

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

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 函数的形式是

(state, action) => newState。

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

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

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

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

// 定义一个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;
  }
};

组件代码如下。

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()的用法如下。

useEffect(()  =>  {
  // Async Action
}, [dependencies]);

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

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

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

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

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状态。

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组件就可以很轻松地使用这些组件了。

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。


本文分享自微信公众号 - 一Li小麦(gh_c88159ec1309),作者:一li小麦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 组件化开发(二):最新组件api

    如果连这点觉悟都没有,那就不是一个合格的程序员。而雇主的本质是逐利,最忌讳的是重构,这个问题可以请高水平的工程师来得到缓解,但不可能彻底解决。

    一粒小麦
  • 爬虫爬取豆瓣电影top250

    我想,爬虫对很多人来说是一个很有魅力的话题,它意味着不用什么努力就拿到了别人辛苦付出的的劳动成果。

    一粒小麦
  • JavaScript设计模式之组合模式

    一个公司,可能分为很多个事业部,然后事业部又分为不同的部门。每个部门可能又分为不同的方向,每个方向又由不同的项目组组成。在程序设计中,也有一些和“事物是由相似的...

    一粒小麦
  • 看完这篇,你也能把 React Hooks 玩出花

    React v16.7.0-alpha 中第一次引入了 Hooks 的概念,在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对...

    Nealyang
  • 看完这篇,你也能把 React Hooks 玩出花

    React v16.7.0-alpha 中第一次引入了 Hooks 的概念,在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对...

    石燕平
  • TensorFlow推出命令式、可定义的运行接口Eager Execution

    安妮 编译自 Google Research Blog 量子位 出品 | 公众号 QbitAI 今天凌晨,谷歌宣布推出TensorFlow的eager exec...

    量子位
  • LeetCode 35. 搜索插入位置

    给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。

    freesan44
  • 徒手撸一个JSON解析器

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。相对于另一种数据交换格式 XML,JSON 有着诸多优点。比如易读...

    南风
  • (一)传统加密技术

    渔父歌
  • 郭台铭称为竞购东芝芯片业务,已获得苹果和亚马逊财务方面的支持

    镁客网

扫码关注云+社区

领取腾讯云代金券