• React Hooks 高阶组件(HOC) render props 以及 hook 的对比和用处 useEffect


    一、react-hooks概念
      React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组件的状态的时候,那么这个组件必须是类组件。那么能否让函数组件拥有类组件的功能?这个时候我们就需要使用hooks。
      Hooks让我们的函数组件拥有了类似类组件的特性,Hook是React16.8中新增的功能,它们允许您在不编写类的情况下使用状态和其他React功能
    
    二、为什么React中需要类组件
      1、需要记录当前组件的状态
      2、需要使用组件的一些生命周期函数
    
    三、类组件与Hooks简单对比
      类组件
    import React from "react"
    export default class App extends React.Component{
        constructor(){
            super();
            this.state = {
                count:0
            }
            this.handleClick = this.handleClick.bind(this);
        }
        render(){
            let {count} = this.state;
            return (
                <div>
                    <h2>{count}</h2>
                    <button onClick={this.handleClick}>修改</button>
                </div>
                )
        }
        handleClick(){
            this.setState({
                count:this.state.count+1
            })
        }
    }
      hooks
    import React,{useState} from "react";
    export default ()=>{
        let [count,setCount] = useState(0);
        let handleAdd = ()=>setCount(count+1);
        return (
            <div>
                <h2>{count}</h2>
                <button onClick={handleAdd}>点击</button>
            </div>
        )
    }
    
    四、Hooks基本使用
      1、Hooks常用的方法
        useState 、useEffect 、useContext以上三个是hooks经常会用到的一些方法
      2、useState
        useState是react自带的一个hook函数,它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第 [0]项是当
           前当前的状态值,第 [1]项是可以改变状态值的方法函数。
    import React,{useState} from "react"
    export default ()=>{
        let [count,setCount] = useState(0);
        let addCount = ()=>setCount(count+1);
        return (
            <div>
                <h2>{count}</h2>
                <button onClick={addCount}>点击</button>
            </div>
        )
    }
      useState : 创建一个状态,这个状态为0
      count : 代表当前状态值也就是0
      setCount : 更新状态的函数
      addCount = ()=>setCount(count+1);调用setCount就可以用来修改状态
      2-1、useState返回的是什么?
    const [count,setCount] = useState(0);
    const state = useState(0);
    const count = state[0];
    const setCount  = state[1]
      注意:
        1、useState一定要写在函数初始的位置不能在循环或判断语句等里面调用,这样是为了让我们的 Hooks 在每次渲染的时候都会按照 相同的顺序 调用,因为这里有一个关键的问题,那就是 useState 需要依赖参照第一次渲染的调用顺序来匹配对于的state,否则 useState 会无法正确返回它对于的state
        2、我们可以在一个函数组件中使用多个
    export default ()=>{
        let [count,setCount] = useState(0);
          let [count,setCount] = useState(0);
          let [count,setCount] = useState(0);
    }
    五、useEffect基本使用
      我们写的有状态组件,通常会产生很多的副作用(side effect),比如发起ajax请求获取数据,添加一些监听的注册和取消注册,手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里,比如componentDidMount,componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。
                (useEffect = componentDidMount + componentDidUpdate+componentWillUnmount)
      5-1、useEffect
        useEffect中有两个参数,第一个参数是一个函数,第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操作,可以避免一些不必要的性能损失,只要第二个参数中的成员的值没有改变,就会跳过此次执行。如果传入一个空数组 [ ],那么该effect 只会在组件 mount 和 unmount 时期执行。
       5-2、useEffect模拟componentDidMount && componentDidUpdate
    import React,{useState,useEffect} from "react"
    export default ()=>{
        let [title,setTitle] = useState(0);
        let updateTitle = ()=>setTitle(title+1);
        return (
            <div>
                <h2>{title}</h2>
                <button onClick={updateTitle}>点击</button>
            </div>
        )
        
        //参数是一个函数  每次mount 或者 update都会调用当前函数
        useEffect(()=>{
            document.title = `页面为${count}`;
        })
    }
      5-3、如何只在componentDidMount中执行
    import React,{useState,useEffect} from "react"
    export default ()=>{
        let [title,setTitle] = useState(0);
        let updateTitle = ()=>setTitle(title+1);
        return (
            <div>
                <h2>{title}</h2>
                <button onClick={updateTitle}>点击</button>
            </div>
        )
        //将第二个参数设置为一个空数组则只会在componentDidMount中执行
        useEffect(()=>{
            document.title = `页面为${count}`;
        },[])
    }
      5-2、useEffect模拟componentWillUnMount
      useEffect 中还可以通过让函数返回一个函数来进行一些清理操作,比如取消订阅等
    useEffect = (()=>{
        return ()=>{
            //unmount时调用这里
            document.removeEventListener();
        }
    },[])
    四、useEffect 什么时候执行? 
      它会在组件 mount 和 unmount 以及每次重新渲染的时候都会执行,也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行
    
    五、hooks的好处
      面向生命周期编程变成了面向业务逻辑编程
  • 相关阅读:
    css3与gpu加速
    前端集成解决方案小结
    body内html标签的选用
    在win8下快速搭建angularjs测试环境以及可能遇到的问题
    javascript快速排序
    Sublime Text2配置python环境
    python学习第一天
    开机自检
    各种排序算法及c语言实现
    算法表示
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12926724.html
Copyright © 2020-2023  润新知