React组件是根据props与state这两个参数来计算呈现对应的ui表现。
demos源码
state
state是组件内部状态的保存。state代表组件ui的最小状态集合，在我们刚接触react的时候很多时候不明白是否应该把变量作为state，其实是有一定的依据条件来判断的：
- 是否是通过props获取？如果是，它就不必为state
- 是否是一个常量，整个生命周期都保持不变？如果是，它就不必为state
- 是否可以通过state或props计算得到？如果是，它就不必为state
- 是否在组件render方法中使用？如果不是，它就不必为state
state的修改
- 使用
setState
import React, { Component } from "react";
class SetStateCom extends Component {
state = {
name: "dong"
};
onChange = e => {
this.setState({
name: e.target.value
});
};
render() {
let { name } = this.state;
return (
<div>
<input value={name} onChange={this.onChange} /> <br />
name: {name}
</div>
);
}
}
export default SetStateCom;
- state更新异步，执行更新后的操作可以在setState的回调函数中执行。
onChange = e => {
this.setState(
{
name: e.target.value
},
() => console.log(`${this.state.name} ------ 2`)
);
console.log(`${this.state.name} ------ 1`);
};
// 打印结果
// dong ------ 1
// dongd ------ 2
- 不能依赖当前state进行修改，可以使用
(preState) => ({})作为参数的方式进行setState更新。
调用setState，会把要修改的状态放入一个队列中，最后将多次的setState状态进行合并。所以不能依赖当前的state计算下次state。
onChange = e => {
this.setState({
name: this.state.name + 'old1'
});
this.setState({
name: this.state.name + 'old2'
})
};
最后的结果 dongold2 ,并不是dongold1old2 。如果想依赖上次的state，可以这样处理：
onChange = e => {
this.setState(state => ({
name: state.name + "old1"
}));
this.setState(state => ({
name: state.name + "old2"
}));
};
这样每次设置就都会依赖上次的state, 就是dongold1old2 了。
- 避免可变对象的产生
示例：
class ListOfWords extends PureComponent {
render() {
return <div>{this.props.words.join(",")}</div>;
}
}
class WordAdder extends Component {
constructor(props) {
super(props);
this.state = {
words: ["marklar"]
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 这部分代码很糟，而且还有 bug
const words = this.state.words;
words.push("marklar");
this.setState({ words: words });
}
render() {
return (
<div>
<button onClick={this.handleClick} />
<ListOfWords words={this.state.words} />
</div>
);
}
}
这里点击并没有触发我们想要的效果，是因为PureComponent仅仅会对props或者state进行浅比较，在handleClick中改变的是同一个words数组，虽然数组中单词已经变化，但是比较结果是相同的。这时就需要我们考虑如何避免可变数据的产生了。
避免该问题最简单的方式是避免更改你正用于 props 或 state 的值。
对于数字，字符串，布尔值，null， undefined直接修改即可。
对于数组可以使用es6的扩展运算符，以及concat、slice、filter等会返回一个新数组的方法。不要使用push、pop、shift、unshift、splice等修改原数组的方法。
对于对象可以使用es6的Object.assgin，对象扩展语法，等可以返回一个新对象的方法。
props
props是组件对外的接口。下层组件可以通过props使用上层组件的数据或者方法。同样props的更新也是异步的。
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
网友评论