龚箭

函数组件详解

4. 函数组件详解

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

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 可以解决

3. 函数组件的生命周期

  • 生命中期用 Hooks API的useEffect 可以解决
    • 可以用来解决副作用问题
  • 只在第一次渲染的时候调用
    import React,{useState} from "react"
    //箭头函数创建
    const Hello = (props)=>{
        const [n,setN] = useState(0);
        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)
        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>
        )
    }

47

文章

12

标签