React流水账01

自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。

组件 : <Header / >

方法会自动传如一个event对象

func(e) {
  console.log(e.target.innerHTML)
}

方法拿到this函数必须要绑定才可以。

<button onClick = this.func.bind(this)>按钮<button/>

组件初始化时候的state

  constructor () {
    super()
    this.state = { msg: "Hello"}
  }

组件修改state值

  func (){
            console.log(this.state.)
            this.setState({
               msg: this.msg+ "world";
            })
            console.log(this.state.)
  }

两次的打印的值是相同的。不能直接处理this.state里面的参数，异步更新。
setState可以接受对象和函数、setState不会立即修改参数。传参函数可以解决这个问题，

  func (){
    this.setState((state)=>{
      return {
        num : state.num + 1
      }
    })
    this.setState((state)=>{
      return {
        num : state.num + 2
      }
    }
  }

---

Props 和 State

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。

多写props，少写state