函数组件详解

函数组件的创建方式

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

    function Demo(props){
      return <div>hello lucidity---{props.name}</div>
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(<Demo name='React' />, 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<div>
        <h1>{n}</h1>
        <button onClick={onClick}>点我+1</button>
      </div>
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(<Demo />, rootElement);

用useEffect模拟生命周期

模拟componentDidMount（组件已经挂载）

    const Demo = (props)=> {
      const [n,setN] = React.useState(0)
      const onClick = ()=> {
        setN(n+1)
      }
      React.useEffect(()=>{
        console.log('n只渲染了一次')
      },[])     这个数组是关键
      return<div>
        <h1>{n}</h1>
        <button onClick={onClick}>点我+1</button>
      </div>
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(<Demo />, 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<div>
        <h1>{n}</h1>
        <button onClick={onClick}>点我+1</button>
      </div>
    }
    const rootElement = document.getElementById("app")
    ReactDOM.render(<Demo />, 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 <h1>child</h1>
      }
      return<div>
        {visible ? <Child /> : null }
        {visible ? <button onClick= {show}>hide</button> : <button onClick= {hide}>show</button>}
      </div>
  }
    const rootElement = document.getElementById("app")
    ReactDOM.render(<Demo />, rootElement);

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

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