React.js 的 state 就是用来存储这种可变化的状态的。
1.setState 接受对象参数
- setState 方法,它接受一个对象或者函数作为参数。
- setState 方法由父类 Component 所提供。当我们调用这个函数的时候,React.js 会更新组件的状态
state
,并且重新调用render
方法,然后再把 render 方法所渲染的最新的内容显示到页面上。
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
- 当你调用 setState 的时候,React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到 state 当中,然后再触发组件更新。
handleClickOnLikeButton () {
console.log(this.state.isLiked) //false
this.setState({
isLiked: !this.state.isLiked
})
console.log(this.state.isLiked) //false
}
- 你会发现两次打印的都是 false,即使我们中间已经 setState 过一次了。这并不是什么 bug,只是 React.js 的 setState 把你的传进来的状态缓存起来,稍后才会帮你更新到 state 上,所以你获取到的还是原来的 isLiked。
- so,如果你想在
setState
之后使用新的state
来做后续运算就做不到了。
so,这里就自然地引出了 setState 的第二种使用方式,可以接受一个函数作为参数。
2.setState 接受函数参数
以下是对象作为参数
handleClickOnLikeButton () { this.setState({ count: 0 }) // => this.state.count 还是 undefined this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN }
上面的代码的运行结果并不能达到我们的预期,我们希望 count 运行结果是 3 ,可是最后得到的是 NaN。但是这种后续操作依赖前一个 setState 的结果的情况并不罕见
以下是函数作为参数
handleClickOnLikeButton () { this.setState((prevState) => { return { count: 0 } }) this.setState((prevState) => { return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1 }) this.setState((prevState) => { return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3 }) // 最后的结果是 this.state.count 为 3 }
一个函数作为参数。React.js 会把上一个 setState 的结果传入这个函数,你就可以使用该结果进行运算、操作,然后返回一个对象作为更新 state 的对象:
这样就可以达到上述的利用上一次 setState 结果进行运算的效果
3. props
怎么把 props 传进去呢?就像你在用普通的 HTML 标签的属性一样,可以把参数放在表示组件的标签上,组件内部就可以通过 this.props
来访问到这些配置参数了
class Index extends Component {
render () {
return (
<div>
<LikeButton likedText='已赞' unlikedText='赞' />
</div>
)
}
}
比如这里的 likedText
与 unlikedText
,是写在 LikeButton
这个组件的标签里的
你不能改变一个组件被渲染的时候传进来的 props
eg:
// 这是一个反例
handleClickOnLikeButton () {
this.props.likedText = '取消'
this.setState({
isLiked: !this.state.isLiked
})
}
我们尝试在用户点击按钮的时候改变 this.props.likedText ,然后你会看到控制台报错啦
【总结】
* state 是让组件控制自己的状态,
* props 是让外部对组件自己进行配置。
附一个优秀的例子
import React, { Component} from 'react';
import ReactDOM from 'react-dom';
class LikeButton extends Component {
constructor () {
super();
this.state = {isLiked: false}
}
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<button onClick={this.handleClickOnLikeButton.bind(this)} >
{this.state.isLiked ? this.props.likedText : this.props.unlikedText}
</button>
)
}
}
class Index extends Component {
constructor () {
super()
this.state = {
likedText: '已赞初始的lalaaaaaaaaaaaaaaaaaaaa',
unlikedText: '赞初始的laaaaaaaaaaaaaaaaaaa'
}
}
handleClickOnChange () {
this.setState({
likedText: '取消改变后wwwwwwwwwwww',
unlikedText: '点赞改变后wwwwwwwwwwwwww'
})
}
render () {
return (
<div>
<LikeButton
likedText={this.state.likedText}
unlikedText={this.state.unlikedText} />
<div>
<button onClick={this.handleClickOnChange.bind(this)}>
修改 wordings
</button>
</div>
</div>
)
}
}
ReactDOM.render(
<div><Index /></div>,
document.getElementById("app")
);
可以看到,只点击第一个按钮的话,在初始的state里切换,点击后一个按钮后在改变后的state里切换