深入理解React的组件状态

前端之家收集整理的这篇文章主要介绍了深入理解React的组件状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这几天在阅读徐超老师的《React 进阶之路》,然后在看看自己之前的《React Native移动开发实战》,发现之前我自己的书部分写的比较的浅显,最近打算对基础部分进行升级,加大基础部分,特别是React基础部分的讲解,并对React Native提供的组件部分进行升级

众所周知,React框架的核心思想是组件化,一个应用程序由多个组件搭建而成,组件最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。

前面一篇文章我们主要介绍了React组件相关的内容,但是对于组件的Props和State并没有做过多的介绍,本文就着重介绍组件的State。

定义State

众所周知,State作为组件的私有属性,主要用于对组件的私有属性进行管理,通过对属性的状态的监听去渲染UI,从而完成用户数据和界面展示的一致性。

定义State是创建组件的第一步,定义的State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来;同时,State还必须是代表一个组件UI呈现的最小状态集,即State中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算而来的中间状态。

组件中定义的变量是不是应该作为组件State,可以通过下面的4条依据进行判断:

  1. 这个变量是否是通过Props从父组件中获取?如果是,那么它不是一个状态。
  2. 这个变量是否在组件的整个生命周期中都保持不变?如果是,那么它不是一个状态。
  3. 这个变量是否可以通过其他状态(State)或者属性(Props)计算得到?如果是,那么它不是一个状态。
  4. 这个变量是否在组件的render方法中使用?如果不是,那么它不是一个状态。

State 与 Props

除了State,组件的Props也是和组件的UI展示有关的。他们之间的主要区别是:State是可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。在组件状态上移的场景中,父组件正是通过子组件的Props,传递给子组件其所需要的状态。

修改State的正确姿势

1.不能直接修改State。

在React中,直接修改state并不会触发render函数,所以下面的写法是错误的。

// 错误
this.state.title = 'React';

组件的State只能通过setState()方式进行修改。例如:

// 正确
this.setState({title: 'React'});

2. State 的更新是异步的

调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State,计算下个State。当真正执行状态修改时,依赖的this.state并不能保证是最新的State,因为React会把多次State的修改合并成一次,这时,this.state将还是这几次State修改前的State。另外需要注意的事,同样不能依赖当前的Props计算下个状态,因为Props一般也是从父组件的State中获取,依然无法确定在组件状态更新时的值。

举个例子,对于一个电商类应用,在我们的购物车中,当我们点击一次购买数量按钮,购买的数量就会加1,如果我们连续点击了两次按钮,就会连续调用两次this.setState({quantity: this.state.quantity + 1}),在React合并多次修改为一次的情况下,相当于等价执行了如下代码

Object.assign(
  prevIoUsState,{quantity: this.state.quantity + 1},{quantity: this.state.quantity + 1}
)

于是乎,后面的操作覆盖掉了前面的操作,最终购买的数量增加了1个。如果我们要实现加2的效果,可以使用另一个接收一个函数作为参数的setState,这个函数有两个参数,第一个是当前最新状态(本次组件状态修改后的状态)的前一个状态preState(本次组件状态修改前的状态),第二个参数是当前最新的属性props。

// 正确
this.setState((preState,props) => ({ counter: preState.quantity + 1; }))

3. State 的更新是一个浅合并的过程

调用setState修改组件状态时,只需要传入发生改变的State,而不是组件完整的State,因为组件State的更新是一个浅合并(Shallow Merge)的过程。例如,一个组件的状态为:

this.state = {
  title : 'React',content : 'React is an wonderful JS library!'
}

当只需要修改状态title时,只需要将修改后的title传给setState即可。

this.setState({title: 'Reactjs'});

React会合并新的title到原来的组件状态中,同时保留原有的状态content,合并后的State的内容为:

{ title : 'Reactjs',content : 'React is an wonderful JS library!' }

State与Immutable

React官方建议把State当作是不可变对象,一方面是如果直接修改this.state,组件并不会重新render;另一方面State中包含的所有状态都应该是不可变对象。当State中的某个状态发生变化,我们应该重新创建这个状态对象,而不是直接修改原来的状态。那么,当状态发生变化时,如何创建新的状态呢?主要有以下三种情况:

1. 状态的类型是不可变类型(数字,字符串,布尔值,null, undefined)

这种情况最简单,因为状态是不可变类型,直接给要修改的状态赋一个新值即可。例如:

this.setState({ count: 1,title: 'Redux',success: true })

2. 状态的类型是数组

如有一个数组类型的状态books,当向books中增加一本书时,使用数组的concat方法或ES6的数组扩展语法(spread Syntax)即可。

// 方法一:将state先赋值给另外的变量,然后使用concat创建新数组
var books = this.state.books; 
this.setState({
  books: books.concat(['React Guide']);
})

// 方法二:使用preState、concat创建新数组
this.setState(preState => ({
  books: preState.books.concat(['React Guide']);
}))

// 方法三:ES6 spread Syntax
this.setState(preState => ({
  books: [...preState.books,'React Guide'];
}))

当需要从books中截取部分元素作为新状态时,使用数组的slice方法。例如:

// 方法一:将state先赋值给另外的变量,然后使用slice创建新数组
var books = this.state.books; 
this.setState({
  books: books.slice(1,3);
})

// 方法二:使用preState、slice创建新数组
this.setState(preState => ({
  books: preState.books.slice(1,3);
}))

当从books中过滤部分元素后,作为新状态时,使用数组的filter方法

// 方法一:将state先赋值给另外的变量,然后使用filter创建新数组
var books = this.state.books; 
this.setState({
  books: books.filter(item => {
    return item != 'React'; 
  });
})

// 方法二:使用preState、filter创建新数组
this.setState(preState => ({
  books: preState.books.filter(item => {
    return item != 'React'; 
  });
}))

注意:不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态,因为这些方法都是在原数组的基础上修改,而concat、slice、filter会返回一个新的数组。

3. 状态的类型是普通对象(不包含字符串、数组)

1,使用ES6 的Object.assgin方法

// 方法一:将state先赋值给另外的变量,然后使用Object.assign创建新对象
var owner = this.state.owner;
this.setState({
  owner: Object.assign({},owner,{name: 'Jason'});
})

// 方法二:使用preState、Object.assign创建新对象
this.setState(preState => ({
  owner: Object.assign({},preState.owner,{name: 'Jason'});
}))

2,使用对象扩展语法

// 方法一:将state先赋值给另外的变量,然后使用对象扩展语法创建新对象
var owner = this.state.owner;
this.setState({
  owner: {...owner,name: 'Jason'};
})

// 方法二:使用preState、对象扩展语法创建新对象
this.setState(preState => ({
  owner: {...preState.owner,name: 'Jason'};
}))

总结一下,创建新的状态对象的关键是,避免使用会直接修改原对象的方法,而是使用可以返回一个新对象的方法。当然,也可以使用一些Immutable的JS库(如Immutable.js)来实现类似的效果

那么,为什么React推荐组件的状态是不可变对象呢?一方面是因为不可变对象方便管理和调试;另一方面是出于性能考虑,当对象组件状态都是不可变对象时,我们在组件的shouldComponentUpdate方法中,仅需要比较状态的引用就可以判断状态是否真的改变,从而避免不必要的render调用。当我们使用React 提供的PureComponent时,更是要保证组件状态是不可变对象,否则在组件的shouldComponentUpdate方法中,状态比较就可能出现错误,因为PureComponent执行的是浅比较

原文链接:https://www.f2er.com/react/301423.html

猜你在找的React相关文章