揭开React Hooks神秘面纱

最新推荐文章于 2024-08-03 09:23:23 发布
最新推荐文章于 2024-08-03 09:23:23 发布
阅读量283 收藏 1
点赞数
分类专栏： 前端 文章标签： react hooks
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luluan_lin/article/details/102802078
版权

useState

例子

// useState 中的函数只会执行一次
function App (props) {
  const [ count, setCount ] = useState(() => {
    return props.count || 0
  })

  return (
    <div>
      点击次数: { count } 
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
    )
}

不要在循环，条件或嵌套函数中调用 Hook

useEffect

例子

// useState 中的函数只会执行一次
function App () {
  const [ count, setCount ] = useState(0)

  useEffect(() => {
    document.title = count
  })

  return (
    <div>
      页面名称: { count } 
      <button onClick={() => { setCount(count + 1 )}}>点我</button>
    </div>
    )
}

useEffect 的第二个参数

useEffect 的第二个参数，有三种情况

  1. 什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
  2. 传入空数组[]， 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
  3. 传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行
function App () {
  const [ count, setCount ] = useState(0)
  const [ width, setWidth ] = useState(document.body.clientWidth)

  const onChange = () => {
    setWidth(document.body.clientWidth)
  }

  useEffect(() => {
    // 相当于 componentDidMount
    console.log('add resize event')
    window.addEventListener('resize', onChange, false)

    return () => {
      // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false)
    }
  }, [])

  useEffect(() => {
    // 相当于 componentDidUpdate
    document.title = count
  })

  useEffect(() => {
    console.log(`count change: count is ${count}`)
  }, [ count ])

  return (
    <div>
      页面名称: { count } 
      页面宽度: { width }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
    )
}

useContext

React 中 Context 的使用

Context 提供了一种方式，能够让数据在组件树中传递时不必一级一级的手动传递

import React, { createContext } form 'react'
// 创建Context
const ThemeContext = createContext()

class App extends React.Component {
  state = {
    theme: 'red'
  }
  render () {
    const { theme } = this.state
    return (
      // 使用 Context.Provider传递value值 
      <ThemeContext.Provider value={theme}>
        {/* 当Context的Provider值更改时，Consumer 的值必须重新渲染 */}
        <button onClick={() => {this.setState({ theme: 'yellow'})}}>切换</button>
        <Middle></Middle>
      </ThemeContext.Provider>
    )
  }
}

class Middle extends React.Component {
  render () {
    return (
      <Result></Result>
    )
  }
}

class Result extends React.Component {
  render () {
    return (
      // 使用 Context.consumer接受（消费）value 
      <ThemeContext.consumer>
        {
          theme => <h1>ThemeContext的主题为 {theme}</h1>
        }
      </ThemeContext.consumer>
    )
  }
}

export default App

注意：context 类似于全局变量做法，会让组件失去独立性、复用起来更困难，不能滥用、但本身它一定有适合使用的场景，具体看情况使用

contextType

contextType 可以简化 context 的使用，不使用 consumer 也可以共享变量

import React, { createContext } from 'react'

// 创建Context
const ThemeContext = createContext()
const SizeContext = createContext()


class App extends React.Component {
  state = {
    theme: 'red',
    size: 'small'
  }
  render () {
    const { theme, size } = this.state
    return (
      // 使用 Context.Provider 包裹后续组件，value 指定值 
      <ThemeContext.Provider value={theme}>
        {/* 当出现多个Context的时候，只需要将Context.Provider 嵌套即可 */}
        <SizeContext.Provider value={size}>
          {/* 当Context的Provider值更改时，Consumer 的值必须重新渲染 */}
          <button onClick={() => {this.setState({ theme: 'yellow', size: 'big'})}}>按钮</button>
          <Middle></Middle>
        </SizeContext.Provider>
      </ThemeContext.Provider>
    )
  }
}

class Bottom extends React.Component {
  // 申明静态变量、contextType 将 context 直接赋值于 contextType
  static contextType = ThemeContext
  
  render () {
    // 在 render 函数中 可以直接 访问 this.context 获取共享变量、这样就可以不使用 consumer
    const theme = this.context
    return (
      // Context.Consumer Consumer消费者使用Context得值
      // 但子组件不能是其他组件，必须渲染一个函数，函数的参数就是Context得值
      // 当出现 多个Consumer的时候，进行嵌套，每个Consumer 的子组件必须是一个函数，即可
      <div>
        <h1>ThemeContext 的 值为 {theme} </h1>
      </div>
    )
  }
}

class Middle extends React.Component {
  render () {
    return <Bottom></Bottom>
  }
}

export default App;

注意

  1. contextType 只能在类组件中使用
  2. 一个组件如果有多个 consumer ， contextType 只对其中一个有效，所以说，contextType 只能有一个
  3. context中的provider和consumer，在类组件以及函数组件中都可以使用。但是contextType只能在类组件中使用，因为它是类的静态属性。

useContext在函数组件中的应用

import React, { createContext, useContext, useState } from 'react'
// 创建一个context
const Context = createContext(0)
// 1. consumer写法
class Item1 extends PureComponent {
  render () {
    return (
      <Context.consumer>
        {
          count => (<div>{count}</div>)
        }
      </Context.consumer>
    )
  }
}

// 2. contextType写法
class Item2 extends PureComponent {
  static contextType = Context
  render () {
    const count = this.context
    return (
      <div>{count}</div>
    )
  }
}

// 3. useContext写法
function Item3 () {
  const count = useContext(Context)

  render() {
    return (
      <div>{count}</div>
    )
  }
}

function App() {
  const [ count, setCount ] = useState(0)

  render() {
    return (
      <div>
        点击次数: { count } 
        <div onClick={() => {setCount(count + 1)}}>点击</div>
        <Context.Provider value={count}>
          <Item1></Item1>
          <Item2></Item2>
          <Item3></Item3>
        </Context.Provider>
      </div>
    )
  }
}
 export default App

consumer / contextType / useContext 对比学习

  • consumer 嵌套复杂，consumer的第一个子节点必须是一个函数
  • contextType 只支持类组件的写法，且只能使用一次（不支持多个context）
  • useContext 不需要嵌套，写法简单

ref

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素(useRef())

useRef()

import React, { useRef } from 'react'
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.useRef()
<FancyButton ref={ref}>Click me!</FancyButton>;

React.createRef()
React.forwardRef()

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
  1. 通过调用 React.createRef() 创建了一个 React ref 并将其赋值给 ref 变量
  2. 通过指定 ref 为 JSX 属性，将其向下传递给
  3. React 传递 ref 给 forwardRef 内函数 (props, ref) => …，作为其第二个参数
  4. 向下转发该 ref 参数到 ，将其指定为 JSX 属性
  5. 当 ref 挂载完成，ref.current 将指向 DOM 节点

React.forwardRef((props, ref) => (…)) ref参数只在使用 React.forwardRef 定义组件时存在

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init)
reducer接受类型为 (state, action) => newState，并返回与 dispatch 方法配对的当前状态
initialArg初始化元素
useReducer是useState的替代方案

import React, { useReducer } from 'react'

function reducer (count, action) {
  switch (action.type) {
    case 'increment':
      return count + 1
    case 'decrement':
      return count - 1
    case 'reset':
      return 0
    default:
      throw new Error()
  }
}

function Home () {
  const [ count, setCount ] = useReducer(reducer, 0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount({type: 'reset'})}>Reset</button>
      <button onClick={() => setCount({type: 'increment'})}>+</button>
      <button onClick={() => setCount({type: 'decrement'})}>-</button>
    </div>
  )
}

export default Home

惰性初始化

// 优化：延迟初始化
import React, { useReducer } from 'react'

function init(initialCount) {
    return {count: initialCount}
  }
  
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1}
        case 'decrement':
            return {count: state.count - 1}
        case 'reset':
            return init(action.payload)
        default:
            throw new Error()
    }
}

function Home ({initialCount = 0}) {
    const [state, dispatch] = useReducer(reducer, initialCount, init)
    return (
        <div>
            Count: {state.count}
            <br />
            <button
                onClick={() => dispatch({type: 'reset', payload: initialCount})}>
                Reset
            </button>
            <button onClick={() => dispatch({type: 'increment'})}>+</button>
            <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </div>
    )
}

export default Home

useReducer与useState的区别

  • 当 state 状态值结构比较复杂时，使用 useReducer 更有优势
  • 使用 useState 获取的 setState 方法更新数据时是异步的, 而使用 useReducer 获取的 setState 方法更新数据是同步的

实例: 测试数据是否可以连续更新两次

使用useState验证

import React, { useState } from 'react'

function Home () {
  const [ count, setCount ] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => {
        setCount(count + 1)
        setCount(count + 1)
      }}>测试能否连续更新两次</button>
    </div>
  )
}

export default Home

结论: 点击 测试能否连续更新两次 按钮，会发现点击一次 count 还是只增加了 1. 由此可见，useState 确实是 异步 更新数据

使用useReducer验证

import React, { useReducer } from 'react'
import { injectIntl } from 'react-intl'

function reducer (count, action) {
  switch (action.type) {
    case 'increment':
      return count + 1
    case 'decrement':
      return count - 1
    case 'reset':
      return 0
    default:
      throw new Error()
  }
}

function Home () {
  const [ count, setCount ] = useReducer(reducer, 0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount({type: 'reset'})}>Reset</button>
      <button onClick={() => setCount({type: 'increment'})}>+</button>
      <button onClick={() => setCount({type: 'decrement'})}>-</button>
      <button onClick={() => {
        setCount({type: 'increment'})
        setCount({type: 'increment'})
      }}>测试能否连续更新两次</button>
    </div>
  )
}

export default injectIntl(Home)

结论: 点击 测试能否连续更新两次 按钮，会发现点击一次 count 增加了 2. 由此可见，每次dispatch 一个action就会更新一次数据. useReducer 确实是 同步 更新数据

实例：根据不同的操作显示隐藏不同的子组件

import React, { useReducer } from 'react'
import Create from "./compontents/create.tsx";
function reducer(visible: any, action: any) {
  switch (action.type) {
    case "create":
      return {
        ...visible,
        createDisk: !visible.createDisk
      };
    case "attach":
      return {
        ...visible,
        attachDisk: !visible.attachDisk
      };
    case "unattach":
      return {
        ...visible,
        unattachDisk: !visible.unattachDisk
      };
    default:
      throw new Error();
  }
}
const [visible, setVisible]: any = useReducer(reducer, {
    createDisk: false,
    attachDisk: false,
    unattachDisk: false
  });
const handleOperation = (type: String) => {
    switch (type) {
      case "create":
        setVisible({type: 'create'})
        break;
      case "attach":
        setVisible({type: 'attach'})
        break;
      case "unattach":
        setVisible({type: 'unattach'})
        break;
      default:
        break;
    }
  };
  return (
  	<div className="container>
  		<a-button onClick={() => handleOperation('create')}>创建</a-button>
  		<a-button onClick={() => handleOperation('attach')}>挂载</a-button>
  		<a-button onClick={() => handleOperation('unattach')}>卸载</a-button>
  		<Create visible={visible.createDisk} setVisible={setVisible} />
  	</div>
  )
luluan_lin
关注
专栏目录
react hooks
weixin_41269811的博客
10-10 583
一、react hooks的作用 react hooks 是react 16.8的功能，对函数型组件进行增强，让函数组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。 二、react hook要解决的问题 react hooks的产生是为了解决react 类组件的不足，react 类组件的不足主要表现在以下方面： 缺少逻辑复用机制：react 类组件中，为了实现逻辑复用机制，通常使用的是高阶组件和渲染属性，为了实现逻辑复用，增加了无实际渲染效果的组件，增加了
用动画和实战打开 React Hooks（一）：useState 和 useEffect
图雀社区
04-25 1685
我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦 如果你想快速了解如何使用，欢迎阅读我们的 教程文档 哦 本文由图雀社区成员 mRc 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。 如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程???? 自从...
30分钟精通React Hooks
weixin_33834910的博客
11-08 4619
你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ ——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ ——拥有了Hooks，生命周期钩子函数可以先丢一边了。 你在还在为组件中的this指向而晕头转向吗？ ——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对...
常用的 React Hooks 详解
最新发布
My_wife_QBL的博客
08-03 717
React Hooks 是 React 16.8 版本引入的重要特性，旨在让函数组件能够使用状态（state）和生命周期（lifecycle）等特性。Hooks 的出现使得函数组件比类组件更为简洁和易于理解。本文将详细介绍一些常用的 React Hooks，帮助你更好地掌握这一强大工具。
React Hook
Sitaigu的博客
07-30 316
React Hook Hook 是 React 16.8 的新增一系列封装函数，它可以让函数组件中可以使用state，跨组件通信，生命周期等React的特性 Hook的意义在于：将函数组件中的业务逻辑抽离出来，保证组件UI的纯净化 内置Hook (10个) 1.useState 定义和修改state [修改state的方法得到的一定是新值] 基本语法： //定义state和修改state的方法 const [name,setName]=useState<数据类型>(数据默认值) //
react hook 源码完全解读
weixin_59558923的博客
11-07 235
从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的进行学习，尽可能的揭开Hooks的面纱。看到这里我们在回头看看最初的一些疑问：React 如何管理区分Hooks？React通过单链表来管理Hooks。
深入React源码揭开渲染更新流程的面纱
It_kc的博客
10-04 546
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里=Fiber;=FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
pro-react-recipes
03-28
通过一系列精心设计的“食谱”，本书将带领读者一步步揭开React的神秘面纱，揭示其核心原理与最佳实践。 React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其擅长构建单页面应用程序。它采用组件化的...
React hooks
ZuoZuoDangerou的博客
12-28 122
什么是 Hook ？ 官方介绍：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 为什么要用hook？ 改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加 。它可以说是react 2019年最最火的新特征了。 所有的hook useState useEffect useContext useReducer useCal
React Hooks
Darlingmi的博客
10-11 810
一、为什么会有Hooks        介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。 但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有thi
React Hooks入门: 基础
weixin_33941350的博客
03-02 296
前言   首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！React 16.8中新增了Hooks特性，并且在React官方文档中新增加了Hooks模块介绍新特性，可见React对Hooks的重视程度，如果你还不清楚Hooks是什么，强烈建议你了解一下，毕竟这可能真的是React未来的发展方向。   ...
react-hooks
qq_38799074的博客
10-27 348
一、reacthooks功能介绍
React的Hooks
WFL804203164的博客
12-24 109
State Hook State Hook让函数组件也可以有state状态，并进行状态的读写操作 语法：const [xxx, setXxx] = React.useState(initValue) useState()说明 参数：第一次初始化指定的值，并且会做缓存 返回值：包含两个元素的数组，第一个为你内部当前状态值，第2个位更新这个状态的函数 setXxx()的两种写法 setXxx(newVal)：参数为非函数子，直接指定新的状态值，内部用这个值覆盖原来的状态值 setXxx(value =
React中hooks
m0_61135864的博客
11-11 982
hooks 是一些可以让你在函数组件里 钩入 react state及生命周期的特点 hooks 只能在函数组件内使用 我们可以使用class提供给状态也可以使用hooks提供状态 但是在16.8之前 只能使用class提供状态 函数组件展示内容 react组件时用来构建用户界面的 函数式组件本身比较简单 可以很好的胜任根据状态渲染ui而我之前说过 函数式组件没有状态 但是结合hooks后 可以让函数组件内具有维护状态的能力 并且带来了组建的逻辑复用 是一种不一样的复用 useState为函数组件提.
React Hooks（钩子函数）
weixin_52148548的博客
06-14 7419
首先：React的组件创建方式，一种是类组件，一种是纯函数组件。React团队认为组件的最佳写法应该是函数，而不是类。但是纯函数组件有着类组件不具备的特点：这就注定，纯函数组件只能做UI展示的功能，如果涉及到状态的管理与切换，我们就必须得用类组件或者redux，但是在简单的页面中使用类组件或者redux会使代码显得很重。因此，React团队设计了React hooks（钩子）。React Hooks的意思是：组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。四种常用的钩子：我们知道
React Hooks提升受控组件状态管理效率
React 使用 Hooks 简化受控组件状态绑定是React 16.8版本后的一项重要更新，它使得在函数组件中更好地管理状态变得更为直观和灵活。本文将详细介绍如何利用Hooks，如useState和useReducer，来替代传统的类组件方式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值