当前只读状态:是_React 如何管理组件状态及使用 setState 更新状态

通过让组件管理自己的状态，任何时候该状态发生变化了，React 将知道并自动对页面做出必要的更新。

这是使用 React 构建 UI 组件的关键优势之一：如果要重新渲染页面，我们只需考虑更新状态。每次有更新时，我们不需要知道到底是页面的哪个部分发生变化了，也不需要判断如何有效的重新渲染页面，React 会对比之前的输出和新的输出，判断哪些改变了，并为我们做出决策，这个流程称为一致性比较。

Props 指的是父组件的属性，属性代表的是不可变的只读数据，组件的状态是可变的数据，并且最终会影响到页面上渲染的内容，状态在内部由组件本身管理，因为用户输入而改变。

状态管理

基于 React 的组件模型，我们能够将复杂的状态管理，封装到单个组件，要向组件添加状态，需要做的是向组件的类添加一个状态属性，其实就是一个对象，此对象表示组件的状态，每个属性或者对象表示该组件的一部分特定的状态，可以通过this.state来访问状态值。

class Text extends React.Component {
  state = {
    type: 'H1'
  }
  
  render(){
    return (
     <p>Text type: {this.state.type}</p>
    )
  }
}

值得注意的是，你不能够将你的状态放在class外面，放外面即使你的值更新了React也不知道值更新。

// wrong
const type= 'H1';

class Text extends React.Component {
  render(){
    return (
     <p>Text type: {type}</p>
    )
  }
}

避免使用props初始化状态，这样容易引起错误。

this.state = {
  user: props.user
}

如上示例，如果props被更新了，当前状态不会改变，使用props生产组件的初始化状态还会出现重复的数据问题。

使用 setState 更新状态

虽然组件在初始化时可以设置其状态，但是我们预期状态会随着时间的推移而变化，组件能够使用this.setState()更改其内部状态，而每次状态发生变化，React 都知道并调用render()来重新渲染该组件，这样可以快速有效地更新你的应用UI。

使用setState的方式有两种

Your UI is just a function of your state

• 向setState传递一个函数，并将之前的状态作为第一个参数传递给该函数，此函数返回的对象将与当前状态合并，形成新的状态。

this.setState((prevState) =>({
  count: prevState.count + 1
}))

• 向setState传入一个对象，此对象将与当前状态合并，形成新的状态

this.setState({
  username: 'Johnson'
})

当点击删除按钮时，删除用户

// App.js
class App extends Component {
  state = {
    contacts: [{
      "id": "Johnson",
      "name": "Johnson",
      "email": "..@qq.com",
      "avatarURL": "../xxx.jpg"
    },
    // ...
    ]
  }
  removeContact = (contact) => {
    this.setState((state)=>({
      contacts: state.contacts.filter((c)=>c.id !== contact.id)
    }))
  }
  render() {
    return (
      <div>
        <ListContacts onDeleteContact={this.removeContact} contacts={this.state.contacts} />
      </div>
    );
  }
}

// listContacts.js
<button onClick={() => props.onDeleteContact(contact)} className='contact-remove'>
            remove
          </button>

如果组件的新状态取决于之前的状态，则使用setState的函数方法，而在其他情况下使用对象方法。无论使用何种方法，React 都会重新渲染整个应用并更新 UI。