React之正确修改state

~ state可以通过this.state.{属性}的方式直接获得，但当修改state时，往往有很多陷阱需要注意。下面介绍常见的三种陷阱。

直接修改state，组件并不会重新触发render，例如：

正确的修改方式是使用setSate();

很多开发刚开始没有注意到 setState 是异步的。如果你修改一些 state ，然后直接查看它，你会看到之前的 state 。这是 setState 中最容易出错的地方，如：

另外，需要注意的是props的更新也是异步的。
如果需要在 setState 后直接获取修改后的值,可以使用回调函数，setState 方法接收一个 function 作为回调函数。这个回调函数会在 setState 完成以后直接调用，这样就可以获取最新的 state 。如：

当调用setState修改组件状态时，只需要传入发生改变的state，而不是组件完整的state，因为组件state的更新是一个合并的过程。例如，一个组件的状态为：

当只需要修改title时，将修改后的title传给setState即可：

React会合并新的title到原来的组件状态中，同时保留原来的状态content，合并后的state为：

---

福泉市17844422180： react子组件怎么改变父组件的state - ？
智厘普利： 可以通过向子组件传入一个修改state的函数,比如如下代码:父组件:class Father extends Component { construtor(props){ super(props); this.state={ name: 'Peter', age: '26' } } onChangeState(stateName){ this.setState(stateName) } render()...

福泉市17844422180： React怎么修改state数组中的数据 - ？
智厘普利： 我用reactjs生成了html之后,怎么去重新更新这些html呢? 使用this.setState()方法重新设置state是可以 但是如果我要在外部,比如点击某个按钮来更新,而这个按钮不是用reactjs生成的

福泉市17844422180： react state直接赋值可以改变吗 - ？
智厘普利： 可以直接使用react的immutability helpers var update = require('react-addons-update'); var newdata = update(this.state, {c: {d: {1: {e: {$set: 3}}}}}); this.setstate(newdata)

福泉市17844422180： react this.setstate和this.state的区别 - ？
智厘普利： this.state通常是用来初始化state的,this.setstate是用来修改state值的.如果你初始化了state之后再使用this.state,之前的state会被覆盖掉,如果使用this.setState,只会替换掉相应的state值

福泉市17844422180： react.js 怎么更改input的value值 - ？
智厘普利： 在react中是无法直接更改from表单元素的值的,必须通过setState()去响应用户的输入.例如想要更改input的value,则需要监听onChange()事件,然后通过event.target.value来获取用户的输入,再通过设置一个名为value的state,来告诉react重新渲染. onChange(event) {this.setState({value: event.target.value}); } <input value={this.state.value} onChange={this.onChange}/>

福泉市17844422180： 如何测试react中的this.state - ？
智厘普利： state表示react组件内部的一种状态,通过组件内的getInitialState函数,可以为组件的初始状态赋值,当组件的状态发生改变时,组件会重新渲染.官方对state的说明如下:组件其实是状态机(State Machines) React 把用户界面当作...

福泉市17844422180： reactnative setstate 怎么重新渲染页面 - ？
智厘普利： 如果直接操作的state对象需要调用forceUpdate方法 如果用setState 就会自动重新渲染的

福泉市17844422180： 如何管理react 的 state - ？
智厘普利： 关于react和redux技术流的搭建,欢迎看我写的mini-react-redux项目. 用仅仅50行代码,搭建react、redux的完整项目,具备所有功能.项目地址:GitHub - slashhuang/mini-react-redux: 极小型的react+redux的项目搭建,共50行代码 ...

福泉市17844422180： react es6 怎么设置默认的props 于 state - ？
智厘普利： state在constructor方法里写...constructor(props) { this.state = { n: ... } } 写default props有两种方法//1 在组件内部的使用static...static defaultProps = { name: ...}//2 在组件外部 Hello.defaultProps = { name: ...}

福泉市17844422180： redux中state数据变动后怎么强制刷新 - ？
智厘普利： state状态改变是会自动渲染整个store的,不需要强制刷新,比如某个state原来为false,然后变成了true,那么就会刷新了,如果不刷新,检查一下是不是state没有修改成功