react学习之hooks篇

写无状态（函数）组件的时候会应用到，使函数组件变成有状态组件

const Fn=(props )=>{

    //通过props接收父组件传递过来的值，也可以接受父组件的方法从而改变原始props的值

return <div>{this.props.xx}</div>

} 

export default Fn

---

useState的使用

const [count//定义一个变量,setCount//通过这个方法可以改变此变量]=usestate(data//初始值)

例子： 通过setCount方法实时改变count的值来渲染dom

子组件

importReact, {useState}from"react";

constFnComponent= (props)=>{

    let  [count,setCount] =useState(props.value);

    let countNew=0;

    constsetCountNew= ()=>{

    countNew+=1;

};

return(

    <div>

        <div>{props.value}</div>//父组件传递过来的值

        <div>{count}</div>//通过setCount的函数实时改变

        <div>{countNew}</div>//无论如何都不会被改变

        <buttononClick={()=>setCount(count+1)}>

            自身组件变量改变(用useState)

        </button>

        <buttononClick={()=>setCountNew()}>

            自身组件变量改变(未用useState)

        </button>

        <button

            onClick={()=>{

                props.fn(10);//父组件传递过来的方法从而改变this.props中的初始值

            }}

            >

            执行父组件传过来的方法

            </button>

    </div>

);

};

exportdefaultFnComponent;

父组件

state={

    test:0

}

changeTest= (val)=>{

        lettest= (this.state.test+=val);

        this.setState({

            test,

        });

    };

<FnComponentvalue={this.state.test}fn={this.changeTest}/>

---

useEffect的使用

useEffect包含了三个生命周期componentDidMount，componentDidUpdate 和 componentWillUnmount在初始化组件的时候需要做的事

例子：

useEffect(()=>{

    //在组件初始化的时候或者第二个参数发生更新的时候做的事

},[data1,data2])//在[]中data1或者data2发生改变的时候才会执行,可选参数

importReact,{useState,useEffect}from'react';

functionExample(){

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

     useEffect(()=>{    document.title=`You clicked${count}times`; });

 return(

   <div>

         <p>You clicked{count}times</p>

         <buttononClick={()=>setCount(count+1)}>

            Click me

         </button>

   </div>

 );

}