函数组件详解

函数组件的创建方式

    const Demo = (props)=> {
      return
hello lucidity---{props.name}
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

    function Demo(props){
      return 
hello lucidity---{props.name}
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

props的使用

直接把props变成函数的形参，想拿到props里面的东西，直接 props.xxx即可

函数组件中没有state和生命周期

函数组件虽然写起来简单，但是面临这两个问题，就是没有state和生命周期，但是React 16.8版本推出了一个叫Hooks API，其中的一个API---useState可以解决没有state的问题，其中的一个API---useEffect可以解决没有生命周期的问题

useState的栗子：

    const Demo = ()=> {
      const [n,setN] = React.useState(0)
      const onClick = ()=> {
        setN(n+1)
      }
      return

        
{n}
        点我+1
      
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

用useEffect模拟生命周期

• 模拟componentDidMount（组件已经挂载）

    const Demo = (props)=> {
      const [n,setN] = React.useState(0)
      const onClick = ()=> {
        setN(n+1)
      }
      React.useEffect(()=>{
        console.log('n只渲染了一次')
      },[])     这个数组是关键
      return

        
{n}
        点我+1
      
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

React.useEffect第二个参数如果为空数组：无论怎么点击，n都只会渲染一次

• componentDidUpdate（组件已经更新）

    const Demo = (props)=> {
      const [n,setN] = React.useState(0)
      const onClick = ()=> {
        setN(n+1)
      }
      React.useEffect(()=>{
        console.log('n变了')
      },[n])      
      return

        
{n}
        点我+1
      
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

React.useEffect第二个参数为数组，数组里的值是你要变的值；如果不写数组，则代表全部的值都要变

• componentWillUNmount
  栗子：点hide让child组件隐藏，点show让child组件显示

    const Demo = (props)=> {
      const [visible,setVisible] = React.useState(true)
      const show = () => {
        setVisible(false)
      }
      const hide = () => {
        setVisible(true)
      }
      const Child = ()=> {
       React.useEffect(()=>{
          return console.log('child组件销毁了了')
          })  
       return 
child
      }
      return

        {visible ?  : null }
        {visible ? hide : show}
      
  }
    const rootElement = document.getElementById("app")
    ReactDOM.render(, rootElement);

当点击hide的时候，组件被销毁

• constructor()
  不用模拟，函数组件执行的时候就相当于constructor()
• shouldComponentUpdate
  后面的React.memo和useMemo解决
• render()
  函数组件的返回值就相当于render的返回值