浅谈react hook （useEffect ）

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

import ReactDOM from "react-dom";

import "./index.css";

 

// useEffect

// 1，componentDidMount componeDidUpdata  componetWillUnmount

// 2.副作用 (Dom操作 数据请求 组件更新)

// 3.useEffect在组件内使用 可以获取props 和stats 采用闭包的形式

// 4.无阻塞更新

// 5.useEffect(回调函数 ，数组（可不写）)

// 6.多个useEffect

// useEffect会在组件加载完成以后，执行一次，所以有第一条中，其可以控制三个生命周期 componentDidMount componeDidUpdata  componetWillUnmount

function Welcome(props) {

    useEffect(()=>{

        console.log(props);

    },[props])

    return (<h1>你好呀, {props.name}</h1>)

}

class App extends React.Component {

    state = {

        name: '张三',

        age:18,

 

    }

    componentDidMount() {

        console.log('123');

    }

    render() {

      

        return (

            <div>

                <Welcome name={this.state.name}></Welcome>

                 <h1>Hello, {this.state.name}我今年{this.state.age}</h1>

                 {/* 一，react方法的使用 */}

                <button onClick={() => this.setState({ name: '007'})}>改名</button>

            </div>

               

      )

    }

    

}

ReactDOM.render(<App />, document.getElementById("root"));