react基础

/**

• JSX

  1. 不是 HTML
  2. 是一个对象 - type props chilren

• ReactDOM.render setState

• Props:

  1. 单向数据流
     A -> B -> C -> D
     从 A -> D 传值 user = '小花' // user -> 小白 <B user="小花" /> <C user="小花" /> <D />
  2. 父组件传值

• state

  1. 组件自己属性

  this.setState({
  属性: 值
  }, () => {
  // 拿到异步 state 修改后的值
  })
  3.
  this.setState(preState => {
  return {
  属性: 值
  }
  }, () => {
  // 拿到异步 state 修改后的值
  })

  this.setState(old => {
  // 拿到异步 state 修改后的值
  })
  4. 异步:
  a. JSX 自带的事件
  b. 生命周期

  5. 同步:
     a. setTimeout setInterval
     b. js 原生的事件 DOM0 DOM2
     el.addEventListener()
     c. ajax

• 生命周期

  1. 16.4之前:
     a. 加载阶段: 首次渲染
     constructor
     render
     componentDidMount
     b. 更新阶段
     componentWillReceiveProps: 组件接受新的 props 时调用
     shouldComponentUpdate(nextProps, nextState)
     return true // 页面渲染
     return false // 页面不渲染
     componentWillUpdate
     render
     componentDidUpdate
     c. 卸载阶段
     componentWillUnmount

  2. 16.4 之后
     加载阶段:
     constructor
     static getDerivedStateFromProps(nextProps, prevState)
     render
     componentDidMount
     更新阶段:
     static getDerivedStateFromProps(nextProps, prevState)
     shouldComponentUpdate(nextProps, nextState)
     return true // 页面渲染
     return false // 页面不渲染
     render
     getSnapshotBeforeUpdate(prevProps, prevState)
     componentDidMount
     卸载阶段:
     componentDidMount

• 受控组件 非受控组件:

• key:

  1. index 当 key 会不会有问题, 可能会有什么问题
  2. 怎么解决这个 2种方案
  3. 你自己实现一个插件
     function x1 () {
     return Math.random()
     }
  4. 时间戳当 key: 不可以 v8引擎解析非常快 会有相同的值
     */