Immutability Helper
这是react官方文档推荐的方法(源代码很少)
一般的state，例如层级比较浅的，可以直接用Object.assign或者...(扩展语法来解构)，但是在层级比较深，或者操作数组的情况下reducer写起来就要麻烦些，这时候就可以用immutability helper的update方法了
//更新数组中的某一条数据
updatePurchaseDetail(state,{ index,payload }) {
return update(state,{
purchaseDetails: {
[index]: {
$merge: payload
}
}
})
},
//向数组中添加一条数据 遵循不可变数据结构 我们不能直接用Push addPurchaseLine(state,{ item }) { return update(state,{ purchaseDetails: { $push: [item] } }) },
const collection = [1,2,{a: [12,17,15]}];
const newCollection = update(collection,{
2: {
a: {
$splice: [[1,1,13,14]] // [1,14]对应于数组的splice函数的参数
}
}
}
);
// => [1,14,15]}]
// 在collection数组索引2的对象的a属性的数组的索引1的位置插入13,14
考虑使用函数式的setState
react官方文档中这样介绍setState的
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
setState不会立即修改this.state,也就是说我们在调用setState的后，立即访问this.state是不能取得最新的this.state的值的。这样在一些特殊需求的时候可能会出现问题。但是我们可以通过使用setState回调函数的形式来使下面的代码拿到最新的this.state的值。
updateState({target}) {
this.setState(prevstate => {
const updatedUser = {...prevstate.user,[target.name]: target.value}; // 使用先前的state来构建新的state的值
doSomething(updatedUser);
return { user: updatedUser };
});
}
使用PureComponent
大家都知道使用好shouldComponentUpdate 可以优化性能，对props 和 state 的所有属性进行比较来决定组件是否需要更新,这个函数默认都是返回true,也就是说需要更新。当我们严格遵守不可变数据结构的时候，就可以继承React.PureComponent来对props和state进行浅比较来决定组件是否应该更新，方便的优化我们组件的性能。PureComponent代替我们做了下面例子中shouldComponentUpdate函数做的事情.相关链接
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps,nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
使用内联函数与传递props的问题
在react中使用内联函数（在render方法里面定义的函数,并通过props传递到子组件）是很方便的，但是这样用也会影响应用的性能。
影响性能的原因主要有两个
1.会经常触发垃圾回收机制
2.一个内联函数每次都是一个新的实例，也就是说每次都会触发子组件的render函数（这个时候使用PureComponent就无效了）
class MyComponent extends React.Component {
render() {
const msg = "Hello " + this.props.user.name.first;
return <PureChild onClick={() => this.props.onAlert(msg)} />;
//另一种形式 this.props.onAlert.bind(this,msg)
}
}
如何避免使用inline function
1.可以把数据绑定在元素上
... //同一个函数需要处理多种情况的时候 handleClick = (ev) => { const { action } = ev.target.dataSet this.props.dispatch({ type: 'handleBpm',action }) } ... <Button data-action="Approve" onClick={this.handleClick}>approve</Button> <Button data-action="Reject" onClick={this.handleClick}>reject</Button>
2.把事件处理函数移到子组件
// 父组件
...
render () {
const msg = "Hello " + this.props.user.name.first;
return (
<PureChild onAlert={this.props.onAlert} msg={msg} />
)
}
// 子组件 PureChild
handleClick = () => {
//do something
const { onAlert,msg } = this.props;
onAlert(msg)
}
...
render () {
return (
...
<div onClick={this.handleClick}></div>
)
}
第二种方法需要我们在可以编码子组件的情况下才可以做到
还有一种通过babel插件reflective-bind的方式可以参考
不只是内联函数，我们在render函数里面应该尽可能少的声明实例，尽量不把在render里生成的实例当做Props传递下去。
区分Container与Component
Container与Component的主要区别在于：
1.Container是跟全局状态有关联的，通常被用来管理数据并通过connect函数连接到全局state,几乎不写样式 2.Component与样式联系紧密，但是不参与管理任何数据，只通过接收到的props响应数据更改
在dva中routes下面的文件目录相当于containers,也就是说我们需要使用connect的组件就应该规划在这里面。
component文件目录就应该放置与全局state无关，可以复用的通用组件。
另外每一个文件夹的入口文件可以用index.js命名，这样有两个明显的好处。第一点是可以让阅读代码的人，一眼就知道在当前目录下，哪个文件是入口文件。第二点是在其他文件Import目标文件的时候，只需要写到folderName的位置就可以了。webpack会自动读取当前文件目录下的index文件。
例如import routes/home 而不用写成import routes/home/index
关于react规范结构的问题 可以参考
how to scale react applications
react-boilerplate
Airbnb React 编码规范
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
