美文网首页
React hooks

React hooks

作者: 一瓣山河 | 来源:发表于2019-07-21 09:42 被阅读0次

Hooks 是React官方 在2018 React Conf 大会上宣布React v16.7.0-alpha(内测)引入的,React v16.8.0 release 可以使用。

why Hooks

  • 难以重用和共享状态逻辑
  • 更小粒度的组件维护,往往项目中类组件的逻辑比较复杂,需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。
  • JavaScript 中闭包函数的性能是非常快的,并且得益于相对于class 更轻量的函数组件,以及避免了HOC,renderProps 等等 …

Hooks如何解决问题

  • 状态逻辑共享
  • 更小粒度的组件维护,往往项目中类组件的逻辑比较复杂,需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。

Hooks 使用

hooks出现之前,函数组件就是通过props传递,输入到输出的映射逻辑;而Hooks 让函数组件拥有和类组件一样的local state和生命周期处理。最常用的几个hooks是 useState, useEffect, useContext,下面详细介绍:

useState

useState 这个方法可以为函数组件带来 local state。

import React, {useState, useEffect } from 'react'
const Example = () => {
   
  const [count, setCount] =  useState(0)
  return (
    <div>
        <span>{count}</span>
        <button onClick={() => setCount(count+1)}>click</button>
    </div>
  )
}

useState 接收一个用于初始 state 的值,返回一对变量。第一个变量是存放state 的变量;第二个变量是一个函数,用于改变该状态值,它可以接受一个值,也可以接受一个函数作为入参, 当入参是函数时,该函数的入参是当前状态值, 返回一个新的状态值。

useEffect

useEffect 可以为函数组件带来一些生命周期的处理。

import React, {useState, useEffect } from 'react'
const Example = () => {
  useEffect(() => {
    document.title =  `you clicked ${count} times`
  }, [count])
  const [count, setCount] =  useState(0)
  return (
    <div>
        <span>{count}</span>
        <button onClick={() => setCount(count+1)}>click</button>
    </div>
  )
}

useEffect可以看做componentDidMount、componentDidUpdate、componentWillUnmount生命周期的结合。每次render后都会调用useEffect()注册的effect函数。当React 渲染我们的组件时,它会记住我们的effect。
有经验的js开发者可能注意到:每次rerender后执行的effect都不同,实际上,每次rerender, React会schedule一个不同的effect,代替上一个effect.

useEffect函数的第二个参数是该effect所依赖的变量,只有当[ ]里的变量发生改变时,才会执行effect。例如,当第二个参数为[],该effect 只会在组件didMount和willUnmount后执行。

Effects with Cleanup

useEffect的设计就把subscribe 和unSubscribe 绑定在一起啦, 当useEffect()函数返回一个函数时,当需要清理时,React就会调用他。

React 清理effect的时机
当组件unmount时,React 清理effect。上面我们说过,effects 在每次render时都会执行,因此,React 会在前一次 effect执行后,下一次 effect 将要执行前,以及 Unmount 时清理。

useContext

useContext 接受一个context对象(通过React.createContext生成的)作为入参, 并返回当前context的value。当前context的value是由组件上层级的最近的 <MyContext.Provider>的value属性决定的。当最近的<MyContext.Provider>的value属性值发生变化,useContext 就会触发组组件的rerender。

const value = useContext(MyContext);

Hooks使用规则

  • 只在React函数中使用hooks,不要在regular js函数中调用
  • 在函数组件的top Level 中使用hooks, 不要在循环、条件语句、嵌套函数中使用,保证每次render后hooks的调用顺序都是一样的
    : React依赖hooks执行的顺序来保证各个状态与各个useState之间的对应关系。

custom hooks

  • 可以把复用的状态逻辑,提取出custom hooks。不同的组件使用同一个custom hook, 并不会共享状态。
  • custom hooks的命名最好以"use"开头,方便eslint 检查

Hooks 原理

使用hooks 的感受

  • 状态与UI的界限越来越清晰
  • hooks让函数组件的功能得到了扩充,拥有了和类组件相似的功能,改善了“原有的React组件嵌套太深”的境况, 但通过React Devtools看到的组件树结构也没有嵌套时的结构更便于调试开发。
  • 强大的API设计
    认真拍的照

相关文章

  • React Hooks

    React Hooks Hooks其实就是有状态的函数式组件。 React Hooks让React的成本降低了很多...

  • react-hooks

    前置 学习面试视频 总结react hooks react-hooks react-hooks为函数组件提供了一些...

  • React Hooks

    前言 React Conf 2018 上 React 提出了关于 React Hooks 的提案,Hooks 作为...

  • 5分钟简单了解React-Hooks

    首先附上官网正文?:React Hooks Hooks are a new addition in React 1...

  • react-hooks

    react-hooks react-hooks 是react16.8以后,react新增的钩子API,目的是增加代...

  • React-hooks API介绍

    react-hooks HOOKS hooks概念在React Conf 2018被提出来,并将在未来的版本中被...

  • React Hooks 入门

    React Hooks 是 React v16.8 版本引入了全新的 API。 React Hooks 基本概念 ...

  • react hooks 源码分析 --- useState

    1. react hooks简介 react hooks 是react 16.8.0 的新增特性,它可以让你在不编...

  • React Hooks的入门简介

    什么是React Hooks? 首先React Hooks是React生态圈里的新特性,它改变了传统react的开...

  • React hooks(钩子)

    React hooks(钩子) React hooks 是React 16.8中的新增功能。它们使您无需编写类即可...

网友评论

      本文标题:React hooks

      本文链接:https://www.haomeiwen.com/subject/izxckctx.html