Javascript

React函数类组件及其Hooks学习

本文主要是介绍React函数类组件及其Hooks学习,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 函数类组件
    • 函数式组件和类式组件的区别:
    • 为什么要使用函数式组件?
  • Hooks概念及常用的Hooks
    • 1. useState: State的Hook
      • 语法
      • useState()说明:
      • setXxx()2种写法:
      • 示例
    • 2. useEffect: 副作用的Hook
      • React中的副作用操作
      • 语法和说明:
        • 总体说明:
        • 替代componentDidMount:
        • 替代componentDidUpdate:
        • 替代componentWillUnmount:
      • 实例:
    • 3. useRef: ref的Hook
      • 语法:
      • 实例:

函数类组件

函数式组件和类式组件的区别:

React组件可以分为类组件和函数式组件,两者最明显的不同就是在语法上,函数组件是一个纯函数,它接收一个props对象返回一个react元素。而类组件需要去继承React.Component并且创建render函数返回react元素,这将会要更多的代码,虽然它们实现的效果相同。

  1. 函数式组件中没有state
  2. 函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组件中定义。)

在较新的react版本看中添加了hooks,使得我们可以在函数组件中使用useState钩子去管理state,使用useEffect钩子去使用生命周期函数。从这个改版中我们可以看出作者更加看重函数组件,而且react团队曾提及到在react之后的版本将会对函数组件的性能方面进行提升。

为什么要使用函数式组件?

  1. Hooks是比高阶组件(HOC)和render props更优雅的逻辑复用方式。这个是很多人喊“真香”的原因。优雅的逻辑复用方式,会促进一个更加蓬勃的生态,这对于原本生态就很强的React来说是如虎添翼。会有更多的人愿意把自己的逻辑抽离成hooks(因为真的太优雅了),发布为library,为react生态添砖加瓦(看看这段时间各种基于hooks的状态管理工具)。我还认为,很快会出现一些“hooks生态圈”的“lodash”。
  2. 函数式组件的心智模型更加“声明式”。hooks(主要是useEffect)取代了生命周期的概念(减少API),让开发者的代码更加“声明化”:
  • 旧的思维:“我在这个生命周期要检查props.A和state.B(props和state),如果改变的话就触发xxx副作用”。这种思维在后续修改逻辑的时候很容易漏掉检查项,造成bug。
  • 新的思维:“我的组件有xxx这个副作用,这个副作用依赖的数据是props.A和state.B”。从过去的命令式转变成了声明式编程。
  • 其实仔细想一想,人们过去使用生命周期不就是为了判断执行副作用的时机吗?现在hooks直接给你一个声明副作用的API,使得生命周期变成了一个“底层概念”,无需开发者考虑。开发者工作在更高的抽象层次上了。
  • 类似的道理,除了声明副作用的API,react还提供了声明“密集计算”的API(useMemo),取代了过去“在生命周期做dirty检查,将计算结果缓存在state里”的做法。React内核帮你维护缓存,你只需要声明数据的计算逻辑以及数据的依赖。
  1. 函数式组件的心智模型更加“函数式”。react团队正在循序渐进地教育社区,为未来的并发模式打下基础。(其实react从一开始就受到了很多函数式编程的影响,现在推行函数式组件算是“回归初心”)。下面我会详细讨论函数式组件的心智模型。

Hooks概念及常用的Hooks

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

React官网是这样描述Hooks的:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态,使其更加可预测。

1. useState: State的Hook

State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作。

语法

const [xxx, setXxx] = React.useState(initValue)

useState()说明:

参数: 第一次初始化指定的值在内部作缓存;

返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数。

可以多次使用useState()

setXxx()2种写法:

setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

示例

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);
    
  // 加的回调 setXxx()第二种写法
  function add() {
      setCount(count => count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me to + 1
      </button>
      <button onClick={() => setCount(add)}>
        Click me to add 1
      </button>
    </div>
  );
}

export default Example

2. useEffect: 副作用的Hook

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)。

我们之前可能已经在React组件中执行过数据获取、订阅或者手动修改过DOM。我们统一把这些操作称为“副作用”,或者简称为“作用”。它跟 class 组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 具有相同的用途,只不过被合并成了一个 API。

React中的副作用操作

  • 发ajax请求数据获取
  • 设置订阅 / 启动定时器
  • 手动更改真实DOM

语法和说明:

  • 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作
  • useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量(或其他 props)。
  • 默认情况下,它在第一次渲染之后和每次更新之后都会执行,即不加第二个参数的情况下。

总体说明:

useEffect(() => { 
	// 在此可以执行任何带副作用操作
	return () => { // 在组件卸载前执行
	// 在此做一些收尾工作, 比如清除定时器/取消订阅等
	}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

可以多次使用useEffect

替代componentDidMount:

useEffect(() => { 
	// 在此可以执行任何带副作用操作,来初始化代码
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

替代componentDidUpdate:

useEffect(() => { 
	// 在此可以执行任何带副作用操作
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行,此时不能为空,数组内的值为所监控的state的值,如果不加此参数,默认为所有的state的值
// 例如如下代码
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

替代componentWillUnmount:

useEffect(() => { 
	return () => { // 在组件卸载前执行
	// 在此做一些收尾工作, 比如清除定时器/取消订阅等
	}
})

实例:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. useRef: ref的Hook

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据,跟React.createRef()类似。

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。

语法:

const refContainer = useRef()

ref 对象的 .current 属性为相应的 DOM 节点。

实例:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
这篇关于React函数类组件及其Hooks学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!