前言
在 React 开发中,是需要经常与数据进行频繁交互的.React 中数据的流向是自顶向下的,单向流动的,数据主要都是存储在
State
和Props
中,Props
和State
是组件数据的表示形式
一、Props
1.1Props的理解
props 是组件对外的接口,它代表了组件的属性,它是一个从组件外部传入的只读的数据对象
,用于组件之间的数据传递
.因为它是只读的,所以它的值不能在组件内部直接修改,只能通过父组件重现传递新值来实现.这使得Props
具有很好的可预测性和维护性,方便对组件的复用和组合
1.2 Props更新
Props
是同步更新
的。当父组件传递新的 props 给子组件时,React 会立即调用子组件的 render
方法进行重新渲染。
1.3 更新时注意
Props
变化可能会触发子组件内部的一些生命周期方法,这些方法可能是异步的。因此,如果在这些方法中修改组件的 state 和 props,可能会导致一些非预期的结果。
为了避免这种情况,我们应该遵循 React 的最佳实践,不要在子组件的生命周期方法中修改 props 和 state,而是在 render
方法中只读取 props 和 state,然后使组件在每次渲染时都能够正确地获得最新的 props 和 state 值。如果确实需要在生命周期方法中根据 props 更新组件的 state,可以使用 componentDidUpdate
方法,该方法会在组件重新渲染之后立即调用,这时会得到最新的 props 值
二、State
1.1 State的理解
State
是组件对内的接口,它代表了组件的内部状态
,它是一个可读可写的数据对象
,用来表示组件的当前状态和数据.组件的状态可以随着之间时间和用户的交互而改变,当组件的状态发生变化时,React会自动重新渲染组件
.从本质上来说,State
是组件自己管理的私有数据,并不可被其他组件直接访问和修改
1.2 State的更新
setState
方法去更新组件的 state 状态时,React 并不会立即修改组件的 state 值,而是将新的值放入一个队列中,然后等待合适的时机再去更新组件的 state 值。这个合适的时机指的是 React 内部的更新机制
,在 React 的生命周期中,组件的 state 和 props 变更会在下一次渲染之前被 batched(批处理) 在一起,然后再在一次渲染周期内进行更新。这是为了提高性能,避免频繁地渲染组件,导致页面的频繁更新。
1.3 注意点
由于 setState
是异步的,所以直接调用 State
来获取当前状态的值可能会出现不一致的情况。如果需要对 setState
进行连续的多次修改并且每一次修改都依赖前一次的结果,可以使用函数式的 setState
,这样才能保证每次修改的 state 都是最新的
总结
Props
和 State
都是 React 组件内部用来存储数据的方式,props 属性传递数据,state 存储内部状态,它们在组件开发中扮演了非常重要的角色,并且相互配合,是 React 组件的核心基础。