React Hooks

React Hooks官方文档

基础Hooks的API

useState、useEffect和useContext

useState用法： 使用useState声明当前函数组件的state变量，与class组件的区别是一个setState函数进行赋值，Hooks使用自定义的函数进行赋值；

import React, { useState } from 'react';

export interface DemoProps{
    title?: string;
}

const Demo:React.FC<DemoProps> = (props) =>{
	const [count, setCount] = useState(0);
    
    return(
    	<>
        	<div>测试数字：{count}</div>
            <div>
            	<button onClick={() => { setCount(count + 1); }}>加count<button>
            </div>
        </>
    )
};

export default Demo;

useEffect用法： 可简单理解为函数组件中生命周期，与componentDidMount(组件初始挂载)、componentDidUpdate（组件更新）和componentWillUnmount(组件卸载)是有相同之处的；

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

const Demo:React.FC<> = () =>{
	 const [ count, useCount ] = useState(0);
	
	 useEffect(() =>{
     	console.log('count>>函数组件初始化')；
     	useCount(1)；
        return () =>{
        	console.log('count>>函数组件卸载');
            useCount(0);
        }
     }, []);
     // 在useEffect中添加一个空数组

	useEffect(() =>{
     	console.log('count>>函数组件更新')；
     	useCount(2)；
    });

	return(
    	<>
        	函数生命周期{count}
        </>
    );
};

export default Demo;