1. 创建方式
2. 函数组件的state
3. 函数组件的生命周期

1. 创建方式

    import React from "react"
    //箭头函数创建
    const Hello = (props)=>{
        return (
            <div>{props.name}</div>
        )
    };
    // 简写
    const Hello = props => <div>{props.name}</div>
    
    //普通函数创建
    function Hello (props){
        return <div>{props.name}</div>
    }

2.函数组件的state

• 函数组件中没有state,没有生命周期
  • REact V16.8 解决方案 Hooks API 的 useSatte 可以解决

    const [n.setN] = React.useState(0);
    setN(n+1)

上面的代码中setN永远不会更新n,他会生成一个新的n

3. 函数组件的生命周期

• 生命中期用 Hooks API的useEffect 可以解决
  • 可以用来解决副作用问题 -只在第一次渲染的时候调用

    import React,{useState} from "react"
    //箭头函数创建
    const Hello = (props)=>{
        const [n,setN] = useState(0);
        const onClick=()=>{setN(n+1)};
        
        //首次渲染执行一次
        useEffect(()=>{
            console.log("渲染了")
        },[]);
        
        //n变化了就执行
        useEffect(()=>{
            console.log("n update")
        },[n]);
        
        //销毁的时候执行
        useEffect(()=>{
            return ()=>{
                console.log("要销毁了")
            }
        })
        
        
        return (
            <div>
                {n}
                <button onClick={onClick}>add</button>
            </div>
        )
    };
​

模仿componentDidUpdate中的问题

    function App (){
        const [n,setN] = useState(0)
        const add = ()=>{
            setN(n+1)
        };
        useEffect(()=>{
            console.log("n的值变化了")
        },[n])
        return (
            <div>
                {n}
                <button onClick={this.add}>add</button>
            </div>
        )
    }

上面的监听在页面初始化的时候也会被监听到,原理是n有初始的undefind变成了0;解决这个问题需要重新自定义一下useEffect;代码如下

    import React,{useState,useEffect} from "react"
    
    //自定义useEffect实现componentDidUpdate
    const useUpdate = (fn,dep)=>{
        const [const,setCount] = useState(0);
        useEffect(()=>{
            setCouent((x)=>{x+1})
        },[dep])
        
        useEffect(()=>{
            if(const >1){
                fn()
            }
        },[count,fn])
    }
    
    function App(){
        const [n,setN] = useState(0)
        useUpdate(()=>{
            console.log("n 发生了变化")
        },n)
        add = ()=>{
            setN(x+1)
        }
        return(
            <div>
                {n}
                <button onClick={this.add}>add</button>
            </div>
        )
    }
​