React/practise/11.定义组件状态的使用.jsx

import React from 'react'

class TestComponent extends React.Component {
  // 1.定义组件状态
  state = {
    // 在这里可以定义各种属性，全都都是当前组件的状态
    name: 'Ken',
  }
  // 事件回调
  changeName = () => {
    // 3.修改 state 中的状态 name
    // 注意：不可以直接做赋值修改，必须通过一个方法 setState
    this.setState({
      name: 'King',
    })
  }
  // 2.使用状态
  render() {
    return (
      <div>
        TestComponent当前的名字为：{this.state.name}
        <button onClick={this.changeName}>修改名字</button>
      </div>
    )
  }
}

function App() {
  return (
    <div>
      <TestComponent></TestComponent>
    </div>
  )
}

/* 总结
1.编写组件其实就是编写原生 JS 类或者函数
2.定义状态必须通过 state 实例属性的方法提供一个对象，名称是固定的就叫做 state
3. 修改state中的任何属性都不可以通知直接赋值，必须走 setState 方法，这个方法来自于继承得到
4.这里的 this 关键词很容易出现指向错误的问题，上面的写法是最推荐和最规范的，没有 this 指向问题 
*/
export default App