React 函数组件详解

目录

1、创建函数组件方式

2、函数组件代替 class 组件

3、函数组件的 useState()

4、函数组件的 useEffect()

5、函数组件模拟生命周期

---

1、创建函数组件方式

相比类组件其实更提倡使用函数组件，因为它在很多操作上都是很便捷的，比如说没有 this。创建函数组件的方式如下：

const Hello = (props) => {    <!--箭头函数的形式-->
    return <div>{ props. message}</div>
}
const Hello = props => <div>{ props. message}</div>    <!--缩写-->

function Hello(props){    <!--普通函数的形式-->
    return<div>{ props. message}</div>
}

2、函数组件代替 class 组件

为什么要用函数组件代替 class 组件？别问，简单！相比类组件来说，函数组件确实要简单太多， 不妨看一个 +1 的例子：

class App extends React.Component {                    const App = props => {
  constructor() {                                          const [n, setN] = React.useState(0);
    super();                                               const addN = () => {
    this.state = {                                             setN(n+1);
      n: 0                                                 }
    };                                                     return (
  }                                                            <div>{n}
  addN = () => {                                               <button onClick={addN}>+1</button></div>
    this.setState({ n: this.state.n + 1 });                )
  };                                                   }
  render() {
    return (
      <div className="App">
        {this.state.n}
        <button onClick={this.addN}>+1</button>
      </div>
    );                                                //这是公共的渲染部分
  }                                                   const rootElement = document.getElementById("root");
}                                                     ReactDOM.render(<App />, rootElement);

通过上面的例子你可以看出，同样是实现 +1 的操作，类组件要比函数组件复杂的多，类组件不仅涉及到 extends、setState 等 API，还会涉及到 this 的使用，而且代码量还很多。反观函数组件就要清爽的多，所以在开发中推荐使用函数组件。

3、函数组件的 useState()

上述通过示例来说明函数组件的优越性，并推荐开发人员使用函数组件，但是如果用函数组件代替 class 组件的话，函数组件还是会面临两个问题：函数组件没有 state、函数组件没有生命周期。

为应对函数组件没有 state：React 在 v16.8.0 推出 Hooks API，其中一个 API 叫做 useState() 

const App=props=>{
    const [n, setN] = React.useState(0);  //useState()返回一个数组，第一个是读，第二个是写
    const addN = () => {
        setN(n+1); 
    }
    return (
        <div>{n}
        <button onclick={ addN }>+1</button></div>
    }
}

4、函数组件的 useEffect()

上述通过示例来说明函数组件的优越性，并推荐开发人员使用函数组件，但是如果用函数组件代替 class 组件的话，函数组件还是会面临两个问题：函数组件没有 state、函数组件没有生命周期。

为应对函数组件没有生命周期：React 在 v16.8.0 推出 Hooks API，其中的一个 API 叫做 useEffect()

const App=props=>{
    const [n, setN] = React.useState(0);  //useState()返回一个数组，第一个是读，第二个是写
    const addN = () => {                  //声明state和函数就相当于类组件的constructor生命周期
        setN(n+1); 
    }
    useEffect(() => {    //useEffect()第一个参数是一个回调，第二个参数指明要模拟什么生命周期
        console.log(' use effect')
    }, [])               //如果第二个参数为[ ] 空数组，则表示 conponentDidMount()

    useEffect(() => {
        console.log('n 被修改了')
    }, [n])             //如果第二个参数为一个变量，则表示改变量变了会执行，它模拟conponentDidUpdate()
                        //如果要看多个变量是否变化，可以写一个数组，如 [n, m]
                        //如果不传递第二个参数，则表示改组件中任意的一个state变化都会执行
    useEffect(() => {
        console.log(' use effect')
        return ()=>{
            console.log('组件要 G');    //useEffect()在第一个回调中的返回函数会在组件将死时调用
        }                               //这是用来模拟类组件的 componentWillUnMount()
    })
    return (            //相当于类组件的render生命周期
        <div>{n}
        <button onclick={ addN }>+1</button></div>
    }
}

总结：函数组件通过使用 useEffect() 可以模拟类组件的生命周期，其中  useEffect() 方法接收两个参数，第一个参数是函数，表示当组件第一次渲染或组件被修改的时候执行，区别是否为第一次渲染需要用到第二个参数。

5、函数组件模拟生命周期

• 模拟 componentDidMount：useEffect((）=> {console.log（'第一次渲染）}，[ ]）。第二个参数为空数组
• 模拟 componentDidUpdate：
  • useEffect((）=> {console.log（'任意属性变更）}。第二个参数为空。
  • useEffect((）=> {console.log（'n变了‘）}，[n]）。第二个参数为要组件上的变量。
• 模拟 componentWillUnmount：useEffect() 的第一个参数的返回函数，会在组件要销毁时调用。
• 模拟 constructor：函数组件在使用 useState() 声明变量，声明组件中的函数，就相当于类组件的 constructor。
• 模拟 shouldComponentUpdate：使用 React.memo 和 useMemo 可以解决。
• 模拟 render：函数组件的 return 就相当于模拟类组件的 render。