Please enable JavaScript.

Coggle requires JavaScript to display documents.

React (选择性渲染 (array动态渲染元素 (Array.map(), Array.map((item) => <li…

- - - - 设置
        this.state = { key: value }
      - 使用
        <h1> {this.state.key} </h1>
      - 通过以下方式将 props 传递到父类的构造函数中
        
        constructor(prps){ super(props) this.state = {date: newDate()} }
    - - 组件constructor 之后
        this.handleClick = this.handleClick.bind(this)
  - - - 变量
      - 函数
      - 组件
      - 使用 <Component key = {props.key} />
        //
        class 定义组件使用<Component key = {this.props.key} />
    - - Compoent.defauleProps = { key: value }
    - - Component.PropsTypes={ key : PropsTypes.string.isRequired}
  - - - class Welcome extends React.Component{ constructor(props){ super(props) this.state = {key: value} } render(){ return <h1> Hello , {this.props.name} </h1> } }
    - - function Welcome(props) { return <h1> Hello , {props.name} </h1> }
- - - - 你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
- - - - 卸载 ||当组件从 DOM 中移除时
        
        错误处理
        
        static getDerivedStateFromError()
        
        componentDidCatch()
        
        componentDidCatch(error, info)
        
        此生命周期在后代组件抛出错误后被调用。
        它接收两个参数：
        
        2 more items...
        
        static getDerivedStateFromError(error)
        
        此生命周期会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state
        
        ComponentWillUnmount()
        
        会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
        
        ComponentWillUnmount()中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
      - 1.static getDerivedStateFromProps
        
        会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
      - shouldComponentUpdate()
        
        根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
        
        默认行为是 state 每次发生变化组件都会重新渲染。
        
        shouldComponentUpdate(nextProps, nextState) {
        //根据nextProps nextState判断是否更新
        }
      - 3.render()
      - 4.getSnapshotBeforeUpdate()
        
        getSnapshotBeforeUpdate(prevProps, prevState)
        
        getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
        
        此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
      - 5.ComponentDidUpdate()
        
        componentDidUpdate(prevProps, prevState, snapshot)
        
        componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
        
        当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
    - - 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
    - - 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。
      - 如需通过网络请求获取数据，此处是实例化请求的好地方。
      - Event listener ||
- - - - 清除过程