React生命周期，组件传参

react生命周期

组件挂载时

当组件实例被创建并插入DOM时，其生命周期调用顺序如下：

1.constructor()

2.static getDerivedStateFromProps()

3.render()

4.componentDidMount()

组件挂载时

当组件的props或state发生变化时会触发更新。组件更新的生命周期调用顺序如下：

1.static getDerivedStateFromProps()

2.shouldComponentUpdate()

3.render()

4.getSnapshotBeforeUpdate()

5.componentDidUpdate()

组件卸载时

当组件从DOM中移除时会调用如下方法

componentWillUnmount()

组件传参

父传子

父
<ChildA value= {this.state.num}>
子
ChildA.defaultProps = {value:1}
//默认参数
{props.value}接收父组件传入参数

子传父

父
setNum=v=>this.setstate({num:v})
<Childa value={this.state.value} setNum={this.setNum}
子组件
<button onClick={()=>{props.setNum(100)}}>
通过props调用父组件传入的方法

组件插槽

组件通过{props.children}获取插槽内容

跨组件

context上下文

提供：Context.Provider，使用：Context.comsumer

全局状态管理

redux，mobx

组件

函数组件

function App() {
  function say(str='你好'){
    alert(str)
  }
  function event(e){
    console.log('事件对象',e)
  }
  return ( 
    <div>
      <h1>时间</h1>
      <button onClick={()=>alert('我真帅')}>警告</button>
      <button onClick={say}>相应函数</button>
    </div>
   );
}


export default App

类组件

import React, { Component } from 'react';
class App extends Component {
    state = {  }
    render() { 
        return ( 
            <div>
            <p>123</p>
            </div>
         );
    }
}

export default App

区别

1.类组件有生命周期，函数组件没有

2.类组件需要继承 Class，函数组件不需要

3.类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行

4.类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）

5.函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用。

Hook

React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题

useState：

通过 useState 为组件提供状态。useState 的参数是 state 的初始值，他只有在组件第一次渲染的时候会生效，他的返回值是一个数组，第一个是 state，第二个是设置state的函数。

useEffect：副作用

模拟挂载完毕
useEffect(()=>{
//模拟挂载完毕
},[]}

模拟某些数据更新
useEffect(()=>{
//模拟num和list的挂载+更新
},[num,list])

模拟任意数据的挂载+更新
use Effect()=>{
    //模拟任意数据的更新
})

模拟组件将要卸载
use Effect()=>{
    return 0=>{ //模拟组件将要卸载}
},[])