React中 Props和State的区别

---

前言

在 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 组件的核心基础。