React函数组件详细

创建函数组件的写法如下：

const Hello = (props) => {
    return <div>{props.message}</div>
}
//or
const Hello = props => <div>{props.message}</div>
//or
function Hello(props){
    return <div>{props.message}</div>
}

而class组件的写法如下：

class B extends React.Component{
    constructor(props){
      super(props)
    this.state = {name: 'jeff'}
  }
  render(){
      return {
        <div>hi</div>
    }
  }
}
export default B;

这两种创建方法相比，class略显复杂，而且，如果要写state，那么class组件的第1~3行是必须写的。提前说明，推荐以后用函数组件写代码。

为什么要用函数组件写代码？

首先比较下，class组件有state、props、生命周期这些东西，那么函数组件有吗？没有，但可以模拟！

模拟生命周期

React的生命周期主要为：

• constructor() —— 初始化props
• shoudComponentUpdate() —— 控制是否UI更新
• render() —— 返回需要返回的东西
• componentDidMount() —— DOM已经挂载好的时机，推荐操作DOM元素以及AJAX请求。首次渲染会执行该钩子。
• componentDidUpdate() —— 也可请求AJAX首次渲染不会执行该钩子。
• componentWillUnmount() —— 即将要死亡。

那么函数组件如何模拟以上的生命周期？这里使用useEffect

模拟 componentDidMount

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

注意useEffect第2个参数是数组！

模拟 componentDidUpdate

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

模拟 componentWillUnmount

useEffect(()=>{
    console.log('第一次渲染')
  return () => {
      console.log('组件要死了')
  }
})

其他生命周期

• constructor：在函数组件执行的时候，就相当于constructor！
• shouldComponentUpdate：可使用React.memo和useMemo可以解决。
• render：函数组件的返回值就是render的返回值。

useState

这是 Hooks API 的其中一个API，解决函数组件没有 state的问题。用法如下：

import {useState} from 'react'
const App = props = {
    const [n, setN] = useState(0)    //使用该API
    const onClick = () => {
        setN(n + 1)
    }
    return (
      <div>
      {n} 
      <button onClick={onClick}> +1 </button>
    </div>
  )
}