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()

优化

shouldComponentUpdate组件里面

this.state和prevState

this.props和prev

Props返回true更新 返回false就不更新

可以比较值类型，也可以比较引用类型

PureComponent 实现

自动比较值类型props

PureComponent是一个React特有的组件，用于优化性能的更新。

它具有与React.Component相同的API，但它内部实现了一个 shouldComponentUpdate()，它会浅比较 props 和 state，以确定 UI 更新是否有必要。如果比较的结果没有发生变化，PureComponent 将跳过更新。

而Component则不会，它会每次都重新渲染，因此性能上会比PureComponent差。

组件传参

父传子

父
<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调用父组件传入的方法

跨组件

context上下文

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

组件插槽

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

全局状态管理

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=>{ //模拟组件将要卸载}
},[])