0
点赞
收藏
分享

微信扫一扫

react hook(基础详解)

南陵王梁枫 2022-03-15 阅读 85

首先演示第一个hook:

State Hook

下面用两种写法表现同样的计数器
传统:

import React from 'react'
export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
    }
    //添加数字并刷新
    add(){
        let {count} = this.state
        this.setState({
            count:count+1
        })
    }

    render() {
        return <div onClick={()=>this.add()}>
            {this.state.count}
        </div>
    }
}

Hook:(方括号中的时候第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state)

import React,{useState} from 'react'
const Main = () =>{
    //方括号中第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state
    const [count,setCount] =useState(0)
    function add() {
        setCount(count+1)//刷新count值
    }
    return (
        <div onClick={()=>add()}>{count}</div>
    )
}
export default Main

这两个写法可以显示一个同样的计数器效果,但是可以明显感觉出来hook写出来的更简洁,更明晰。

组件函数的写法有两种:

function Main(props) {
  return <div />;
}

或者箭头函数

const Main= (props) => {
  return <div />;
}

当然,如果我们想要使用多个state 变量,它允许我们给不同的 state 变量取不同的名称:

// 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');

Effect Hook

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

接下来我们在前面使用hook写的计数器的基础上把useEffect放进去

import React,{useState,useEffect} from 'react'
function Main(){
    //方括号中第一个参数就是自定义的state元素,可以通过第二个自定义方法来刷新这个state
    const [count,setCount] =useState(0)
    
    useEffect(() => {
        console.log(count)
    });
    //添加
    function add() {
        setCount(count+1)//刷新count值
    }
    return (
        <div onClick={()=>add()}>{count}</div>
    )
}
export default Main

这样就可以大家不难发现useEffect 会在每次渲染后都执行

这种情况就可以这样清除

useEffect(() => {
    //使用需要结束后清除的方法
    /*...*/
    return function cleanup() {
       //在这里清除
        /*...*/
    };
});

Hook规则:

举报

相关推荐

0 条评论