React state和props使用场景

Posted sexintercourse

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React state和props使用场景相关的知识,希望对你有一定的参考价值。

一个组件的显示状态可以由内部状态state、外部参数props所决定。

上面的这句话价值100万美元。

啥叫内部和外部呢!

从我们组织程序的角度,入参是state,从后台返回的数据是外部参数时props。所以说state是万能的,可以看做是外部的也是内部的。

但是props 一定是外部的,如何进入内部呢,成为state呢,回调函数。

 

props:

  1、props 是从外部传进组件的参数,主要是父组件向子组件传递数据。

  2、props 对于使用它的组件来说是只读的。要想修改props,必须通过父组件修改。所以子组件的props 通常是父组件的state。

  3、默认值

    为了组件的健壮性,在传入props 的时候常给默认值。

1
2
3
4
5
6
const SubComponent=(props)=> {
  return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {
  name: ‘Rain_tdk‘
};<br>export default SubComponent

  4、为开发方便我们需要对props 的数据类型进行检验

1
2
3
4
5
6
7
8
9
10
11
import PropTypes from ‘prop-types‘;
const SubComponent=(props)=> {
  return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {
  name: ‘Rain_tdk‘
};
SubComponent.propTypes = {
  name: PropTypes.string
};
export default SubComponent

  更多检验参考 :https://www.jianshu.com/p/2896acb5746b

state:

  1、state是React组件中的私有对象,用于控制这个组件本身的状态

  2、setState()采用merge的方式修改state。setState会重新调用render()刷新UI,直接通过this.state=‘xxx’的方式也会修改state但是不会重新渲染。

   注:setState({...newState})当state为Object、Arrary 时diff 比较的是引用,不会刷新UI 。需要使用 concat /slice /...运算符等产生新引用的方法。

  3、应用场景:

      大部分组件的工作应该是从props里取数并渲染出来,但是当需要 用户输入、服务器请求、延定时变化 等作出响应。

      通常在有状态state的组件中处理用户交互逻辑,并通过props传递给子组件(通常为无状态组件)中。

  4、那些属性应该用state

      state 中应该保存可能被事件处理器改变并触发用户页面更新的数据。

  5、哪些属性不应该存储在state中

      5-1、计算所得数据。计算数据应该在render()中实现,如果存储在state中需要手动更新state 比较麻烦

      5-2、基于props 的重复数据。组件中应该保持props为唯一的数据来源,除非需要知道历史数据是啥。

      5-3、不要将React组件保存在state中。在render()里使用props、state来创建他。

  总结:state让你修改(不修改的数据别往state存)。props不让你修改。多个state、props共同影响UI 的时在render()中实现。

以上是关于React state和props使用场景的主要内容,如果未能解决你的问题,请参考以下文章

React State Props使用示例

React Native知识11-Props(属性)与State(状态)

React教程:父子组件传值(组件通信)

React Native props & state

React之Props,及与state的区别

从 0 到 1 实现 React 系列 —— 组件和 state|props