React Hooks--useEffect代替常用生命周期函数方式

目录
  • useEffect代替常用生命周期函数
    • 原始生命周期函数
  • 对React Hooks(useState和useEffect) 的总结思考
    • 一、为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程)
    • 二、useState理解
    • 三、useEffect的理解(原则:让你忘记类组件的生命周期的函数写法)
    • 四、useState和useEffect声明时有先后顺序

useEffect代替常用生命周期函数

原始生命周期函数

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

采用原始的方式把计数器的Demo增加两个生命周期函数componentDidMount和componentDidUpdate。

分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。

代码如下:

import React, { Component } from 'react';

class Example3 extends Component {
    constructor(props) {
        super(props);
        this.state = { count:0 }
    }

    componentDidMount(){
        console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
    }

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.addCount.bind(this)}>Chlick me</button>
            </div>
        );
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
}

export default Example3;

React首次渲染和之后的每次渲染都会调用一遍useEffect函数,而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。

组件中经常用到componentWillUnmount生命周期函数(组件将要被卸载时执行)。比如我们的定时器要清空,避免发生内存泄漏;比如登录状态要取消掉,避免下次进入信息出错。

app.js

import React, { useState , useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了!Index页面')
        return ()=>{
            console.log('老弟,你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

function List() {
    useEffect(()=>{
        console.log('useEffect=>老弟,你来了!List页面')
        return ()=>{
            console.log('老弟,你走了!List页面')
        }
    })

    return <h2>List-Page</h2>;
}

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

  useEffect(()=>{
    console.log(`useEffect=>You clicked ${count} times`)

    return ()=>{
      console.log('====================')
    }
  },[count])

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

        <Router>
          <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
          </ul>
          <Route path="/" exact component={Index} />
          <Route path="/list/" component={List} />
        </Router>
      </div>
  )
}

export default App;

index.js

import React from "react";
import {render} from "react-dom"
import App from "./components/app"
import {BrowserRouter} from "react-router-dom";

//渲染组件,我们使用react-router组件渲染组件时需要使用路由器组件标签,我们可以使用"<BrowserRouter>"或者是"<HashRouter>"。但需要注意哟,这是一个SPA应用哟~
render(
    (
        <BrowserRouter>
            <App />
        </BrowserRouter>
    ),
    document.getElementById("root")
)

PS:

useEffect的第二个参数:

实现类似componentWillUnmount的效果,它是一个数组,数组中可以写入很多状态对应的变量,意思是当状态值发生变化时,我们才进行解绑。

如果我们想每次count发生变化,我们都进行解绑,只需要在第二个参数的数组里加入count变量就可以了但是当传空数组[]时,就是当组件将被销毁时才进行解绑,这也就实现了componentWillUnmount的生命周期函数。

对React Hooks(useState和useEffect) 的总结思考

一、为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程)

Hooks是React16.8版本后新增加的特性,目的是让你用函数组件的写法代替原来的类组件写法,同时让函数组件支持state,同时用useEffect代替原来的生命周期的业务功能编写代码

风格,目的就是解决原来用class写组件的痛点,痛点有哪些自行查阅资料,主要有:

(1)选择性烦恼:是使用状态组件还是无状态组件?   拥有了hooks后,现在一切组件均是Function。

(2)搞不清生命周期的钩子函数?  拥有了hooks后,生命周期钩子函数可以先丢一边了。

(3)组件的this搞晕了?拥有了hooks后,不需面对this.

二、useState理解

1.useState是异步的,定义方法(语法叫数组解构写法),例如:

// 声明一个叫 “count” 的 state 变量 
 const [count, setCount] = useState(0);
// 更新state
<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

2. state变量可以定义多个,也可以存储对象和数组,这边有一个规则:它总是替换它,而不象class一样合并它,即有闭包的概念。

三、useEffect的理解(原则:让你忘记类组件的生命周期的函数写法)

useEffect出现的需求背景:我们只想在 React 更新 DOM 之后运行一些额外的代码   (所以叫副作用函数)

(一) 它是一个钩子函数的定义,即对于dom的渲染后会产生相应的副作用(这个副作用中定义相关的功能),达于原来类组件的对生命周期函数一样的应用效果,但比它更灵活省事。

(二)定义一个useEffect主要分为四种定义方法(总结:需不要return,需不要第二个参数,第二个参数要不要[]):

  • 1.每次渲染都要执行:则第二个参数不需要。
  • 2.在组件销毁或者调用函数前调用。:   则第一个参数中增加return语句。
  • 3.只在组件挂载时执行一次:则第二个参数用空数组:[].
  • 4.只在某一个state或者prop值发生变化后,才执行,则第二个参数[变量名]。

(三)useEffect可以定义多个,把功能实现进行分离。

(四)useEffect 使用规则:

  • 1.只在最顶层使用 Hook
  • 2.只在 React 函数中调用 Hook

四、useState和useEffect声明时有先后顺序

产生的结果是不一样,所以根据业务需要灵活确定他们先后顺序的组合。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 浅谈React Component生命周期函数

    React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理: 1,挂载:constructor(常用).static getDerivedStateFromProps.render(常用).componentDidMount(常用) constructor是类组件的构造函数,在这可以初始化组件的state或进行方法绑定如:constructor(props){ super(prop

  • React的生命周期函数初始挂载更新移除详解

    目录 概述 constructor 初始 挂载 更新 移除 概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数 初始 当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被

  • React 组件的常用生命周期函数汇总

    目录 1. 概述 2. 生命周期的三个阶段 2.1. 创建时(挂载阶段) 2.2. 更新时(更新阶段) 2.3. 卸载时(卸载阶段) 1. 概述 意义:组件的生命周期有助于理解组件的运行方式.完成更复杂的组件功能.分析组件错误原因等. 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程. 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数. 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机. 只有类组件才有生命周期. 2. 生命周期的三个阶段 每

  • React中useEffect与生命周期钩子函数的对应关系说明

    目录 React useEffect与生命周期钩子函数的对应关系 使用格式一:不带参数的情况 使用格式二:带第二个参数,参数为空数组 使用格式三:带第二个参数,并且指定了依赖项 使用格式四:依赖项为空,没有具体的副作用函数.但是有副作用函数的清理函数. React函数式组件用useEffect模拟三个生命周期钩子函数 React useEffect与生命周期钩子函数的对应关系 在React的函数组件中,useEffect的作用其实也对标了类组件中的生命周期,它的四种使用格式也与生命周期的四种钩子

  • react新版本生命周期钩子函数及用法详解

    和旧的生命周期相比 准备废弃三个钩子,已经新增了两个钩子 React16 之后有三个生命周期被废弃(但并没有删除) componentWillMount( 组件将要挂载的钩子) componentWillReceiveProps(组件将要接收一个新的参数时的钩子) componentWillUpdate(组件将要更新的钩子) 新版本的生命周期新增的钩子 getDerivedStateFromProps 通过参数可以获取新的属性和状态 该函数是静态的 该函数的返回值会覆盖掉组件状态 getSnap

  • React中的生命周期详解

    目录 react生命周期 常用的生命周期 不常用的生命周 完整的生命周期图 react生命周期 函数组件无生命周期,生命周期只有类组件才拥有 生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生 的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载 常用的生

  • React Hooks--useEffect代替常用生命周期函数方式

    目录 useEffect代替常用生命周期函数 原始生命周期函数 对React Hooks(useState和useEffect) 的总结思考 一.为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程) 二.useState理解 三.useEffect的理解(原则:让你忘记类组件的生命周期的函数写法) 四.useState和useEffect声明时有先后顺序 useEffect代替常用生命周期函数 原始生命周期函数 componentDidMount componentDidUp

  • 使用useEffect模拟组件生命周期

    目录 useEffect模拟组件生命周期 让函数组件模拟生命周期 初始化 更新阶段 卸载阶段 useEffect实现componentWillUnmount生命周期函数 阐述 useEffect 解绑副作用 useEffect的第二个参数 useEffect模拟组件生命周期 让函数组件模拟生命周期 默认函数组件没有生命周期 函数组件是一个纯函数,执行完即销毁,自己无法实现生命周期 通过Effect hook把生命周期“钩”到纯函数中     // 模拟 class 组件的 DidMount 和

  • React Hooks常用场景的使用(小结)

    前言 React 在 v16.8 的版本中推出了 React Hooks 新特性.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护: 组件树层级变浅,在原本的代码中,我们经常使用 HOC/render props 等方式来复用组件的状态,增强功能等,无疑增加了组件树层数及渲染,而在 React Hooks

  • react中(含hooks)同步获取state值的方式

    目录 react(含hooks)同步获取state值 环境 代码示例 异步写成同步的方法 react hooks常用方法 1.useState 2.useEffect 3.useContext上下文传值 4.useReducer 5.useMemo 6.useRef react(含hooks)同步获取state值 环境 "dependencies": {     "babel-plugin-transform-decorators-legacy": "^1

  • React生命周期函数深入全面介绍

    目录 1. 注意 2. 图解 3. 生命周期函数 3.1 constructor构造函数 3.2 static getDerivedStateFromProps(nextProps, prevState)方法 3.3 挂载时和更新时的生命周期函数执行顺序 3.4 componentWillUnmount函数的使用 3.5 shouldComponentUpdate优化渲染方案 1. 注意 函数组件无生命周期,生命周期只有类组件才拥有. 2. 图解 完整的生命周期主要为三个部分,分别为挂载时.更新

  • 详解react hooks组件间的传值方式(使用ts)

    目录 父传子 子传父 跨级组件(父传后代) 父传子 通过props传值,使用useState来控制state的状态值 父组件 Father.tsx里: 子组件 Child.tsx里: 展示效果: 子传父 跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state 父组件,Father.tsx里: 子组件,Child.tsx里: 展示效果: 子传父优化版,使用useCallback存放处理事件的函数 父组件,Father.tsx里: 子组件,Child.tsx

  • 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

随机推荐