创建方式

//第一种
const Hello =(props)=>{
    return <div>{props.message}</div>
}
//第二种
const Hello =props=><div>{props.message}</div>
//第三种
function Hello (props){
    return <div>{props.message}</div>
}

举例 - 做一个+1的按钮

const App=()=>{
    const [n,setN]=React.useState(0)
    const onClick=()=>{
        setN(n+1)
    }
    return <div>
        {n}
        <button onClick={onClick}>+1</button>
    </div>
}

useEffect

const App = (props) => {
    const [childVisible, setChildVisible] = React.useState(true);
    const hide = () => {
        setChildVisible(false);
    };
    const show = () => {
        setChildVisible(true);
    };
    return <div>
        {childVisible ? <button onClick={hide}>hide</button> : <button onClick={show}>show</button>}
        {childVisible ? <Child/> : null}
    </div>;

};
const Child = (props) => {
    React.useEffect(() => {
        console.log('挂载或更新了');
        return () => {
            console.log('销毁了');
        };
    });
    return <div>Child</div>;
};

模拟componentDidMount

useEffect(()=>{console.log('第一次渲染')},[])

模拟componentDidUpdate

useEffect(()=>{console.log('任意属性变更')})
useEffect(()=>{console.log('n变了')},[n])

模拟componentWillUnmount

 React.useEffect(() => {
        console.log('第一次渲染');
        return () => {
            console.log('销毁了');
        };
    });

自定义Hook

做一个第一次不算的useEffect组件

useUpdate

第一次由undefined变成0时不执行函数
第二次变化时，执行函数
第三次变化时，执行函数

const useUpdate = (fn, array) => {
   const [count, setCount] = React.useState(0);
   React.useEffect(() => {
       setCount(count + 1);
   }, array);
   React.useEffect(() => {
           if (count > 1) {
               fn();
           }
       }, [count]
   );
};