react中hook基本使用

react中hook使用

react中什么是hook

• 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
• hook的主要作用是为了让组件内的逻辑更加清晰，并且可以通过自定义hook来达到复用逻辑。
• hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头。

hook基本使用（useState,useEffect）

• useState作用

  • 创建初始化值，代替constructor中的this.state；

  • 使用是根据第一个参数，修改根据第二个参数

    import React, { useEffect, useState } from 'react';
    
    const HookDemo =  (props) =>{
      const [number, setNumber] = useState(1);
    
      useEffect(()=>{
        setNumber(3)
        console.log('初始化打印,number发生改变');
      },[])
    
      return (
        <div>{number}</div>
      )
    
    }
    
    export default HookDemo;
    

• useEffcct使用

  • 对应组件生命周期中的Mount阶段和Update阶段。

  • useEffcct中的两个参数，

    • 副作用函数，副作用函数还可以返回一个函数对象，这个函数对象用来清除副作用，不用清除副作用则不用返回。对应class生命周期中的卸载componentWillUnmount，更新componentWillUpdate。
    • 数组（可选），里面传入副作用函数中使用到的数据变量，并且这个变量得具有一定变化的特性，第二个参数主要用于优化，防止进行重复渲染

  • import React, { useEffect, useState } from 'react';
    
    const HookDemo =  (props) =>{
      const [number, setNumber] = useState(1);
    
      useEffect(()=>{
        // setNumber(3) 第一次执行，之后当number发生改变再次执行
        console.log('初始化打印,number发生改变');
        const time = setTimeout(()=>{
          console.log('执行')
        },2000)
        return (
          // 销毁
          () =>{
            clearTimeout(time)
          }
        )
    
      },[number])
    
      return (
        <div>{number}</div>
      )
    
    }
    
    export default HookDemo;
    
    

hook使用

• hook和生命周期函数一样，必须写在函数最顶层。
• 而且hook不应该被嵌套进条件或者循环语句中。
• hook只能在函数组件或者自定义hook中被使用，而不能用于普通函数或者class组件中

------------恢复内容开始------------

react中hook使用

react中什么是hook

• 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
• hook的主要作用是为了让组件内的逻辑更加清晰，并且可以通过自定义hook来达到复用逻辑。
• hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头。

hook基本使用（useState,useEffect）

• useState作用

  • 创建初始化值，代替constructor中的this.state；

  • 使用是根据第一个参数，修改根据第二个参数

    import React, { useEffect, useState } from 'react';
    
    const HookDemo =  (props) =>{
      const [number, setNumber] = useState(1);
    
      useEffect(()=>{
        setNumber(3)
        console.log('初始化打印,number发生改变');
      },[])
    
      return (
        <div>{number}</div>
      )
    
    }
    
    export default HookDemo;
    

• useEffcct使用

  • 对应组件生命周期中的Mount阶段和Update阶段。

  • useEffcct中的两个参数，

    • 副作用函数，副作用函数还可以返回一个函数对象，这个函数对象用来清除副作用，不用清除副作用则不用返回。对应class生命周期中的卸载componentWillUnmount，更新componentWillUpdate。
    • 数组（可选），里面传入副作用函数中使用到的数据变量，并且这个变量得具有一定变化的特性，第二个参数主要用于优化，防止进行重复渲染

  • import React, { useEffect, useState } from 'react';
    
    const HookDemo =  (props) =>{
      const [number, setNumber] = useState(1);
    
      useEffect(()=>{
        // setNumber(3) 第一次执行，之后当number发生改变再次执行
        console.log('初始化打印,number发生改变');
        const time = setTimeout(()=>{
          console.log('执行')
        },2000)
        return (
          // 销毁
          () =>{
            clearTimeout(time)
          }
        )
    
      },[number])
    
      return (
        <div>{number}</div>
      )
    
    }
    
    export default HookDemo;
    
    

hook使用

• hook和生命周期函数一样，必须写在函数最顶层。
• 而且hook不应该被嵌套进条件或者循环语句中。
• hook只能在函数组件或者自定义hook中被使用，而不能用于普通函数或者class组件中

------------恢复内容结束------------