React类组件和函数组件

关于命名，组件第一个字母大写，元素小写，

类组件和函数组件

• 元素与组件
  const div=React.createElement(‘div’,…)
  这是一个React元素(d要小写)
  const Div=()=>React.createElement(‘div’,…)
  这是一个React组件（D大写）
• 什么是组件
  能和其他物件组合起来的物件，就是组件
  组件并没有明确的意义，
  就目前而言，一个返回React元素的函数就是一个组件
  在Vue里面一个构造选项就是一个组件
• React函数组件
  function Welcome(props){
  retuen <h1> hello{props.name}</h1>
  }
  使用方法 < Welcome name=’Tom’ />
• 类组件
  class Welcome extends React.Component{
  render(){
  return <h1> hello{this.props.name}</h1>
  }
  }
  使用方法 < Welcome name=’Tom’ />
• Welcome会被bable翻译成什么
  <div />会被翻译成React.createElement(‘div’)
  <Wlecome />会被翻译成React.createElement(Wlecome)
• React.createElement的逻辑
  如果传入一个字符串’div’会创建一个div
  如果传入一个函数，会调用该函数，获取返回值
  如果传入的是一个类，则在类前面加new，获取一个组件对象，然后调用组件的runder方法，获取返回值。
• 两种组件的例子
  https://codesandbox.io/s/exciting-meninsky-9foduf

  如何使用state和props

  props
  类组件直接读取属性this.props.xxx
  函数组件直接读取props.xxx
  https://codesandbox.io/s/holy-meadow-8vg2ng
  state
  类组件用this.state读，this.setState写
  函数组件用usestate返回函数读写，第一个读，第二个写
  写最好用函数
  https://codesandbox.io/s/strange-marco-vwt0bx

  类组件的注意事项

  this.state.n+=1是无效的吗
  n已经改变了只不过UI没有自动更新
  调用setstate才会触发更新
  因为reacr里没有对数据进行监听

  setstate会异步更新

  setstate之后会异步更新UI,马上读state数据不会更新
  更推荐的方法是setState(函数)获取新值或者做相关的处理，会更方便
  this.setState(this.state)不推荐
  React希望我们不要修改旧的state
  常用代码
  setState({n:state.n+1})

  函数组件的注意事项

  和类组件相似的地方
  也要通过setX(新值)的方式更新数据
  不同
  没有this用变量和参数

  复杂的state

  如果数据不知一个
  类组件里，更新某个state数据时其他数据会沿用上一次的数据，会数据合并，但只合并一层的数据，
  那就使用object.assign()或者【…】操作符
  函数组件的setX就完全不会帮忙合并
  需要用b[…]去展开

  如何绑定事件