React中state和props分别是什么？

yedf 发布于2019-08-22 11:08 / 2949人阅读

摘要：整理一下中关于和的知识点。在任何应用中，数据都是必不可少的。比如，这样关于，可以声明为以下几种类型注意，和是简写。是什么呢一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是，而数据状态就是。

整理一下React中关于state和props的知识点。

在任何应用中，数据都是必不可少的。我们需要直接的改变页面上一块的区域来使得视图的刷新，或者间接地改变其他地方的数据。React的数据是自顶向下单向流动的，即从父组件到子组件中，组件的数据存储在props和state中，这两个属性有啥子区别呢？

props

React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。

组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。

用法

假设我们现在需要实现一个列表，根据React组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：和。

先看看

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => );
  render(){
    return (
      {itemList}
    )
  }
}

列表的数据我们就暂时先假设是放在一个data变量中，然后通过map函数返回一个每一项都是的数组，也就是说这里其实包含了data.length个组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。

在中是这样的：

export default class Item extends React.Component{
  render(){
    return (
      {this.props.item}
    )
  }
}

在render函数中可以看出，组件内部是使用this.props来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个item属性，所以通过this.props.item来获取即可。

只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

默认参数

在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。比如，这样：

Item.defaultProps = {
  item: "Hello Props",
};

Item.propTypes = {
  item: PropTypes.string,
};

关于propTypes，可以声明为以下几种类型：

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

注意，bool和func是简写。

这些知识基础数据类型，还有一些复杂的，附上链接：

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

总结

props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。

state

state是什么呢？

State is similar to props, but it is private and fully controlled by the component.

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state。

用法

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:"一些数据",
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。

setState

state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setState()方法来修改state。

比如，我们经常会通过异步操作来获取数据，我们需要在didMount阶段来执行异步操作：

componentDidMount(){
  fetch("url")
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

当数据获取完成后，通过this.setState来修改数据状态。

当我们调用this.setState方法时，React会更新组件的数据状态state，并且重新调用render方法，也就是会对组件进行重新渲染。

注意：通过this.state=来初始化state，使用this.setState来修改state，constructor是唯一能够初始化的地方。

setState接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象，比如：

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:"axuebin",
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在执行完setState之后的state应该是{name:"axuebin",age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

this.setState({
  name:"xb"
},()=>console.log("setState finished"))

总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

区别

state是组件自己管理数据，控制自己的状态，可变；

props是外部传入的数据参数，不可变；

没有state的叫做无状态组件，有state的叫做有状态组件；

多用props，少用state。也就是多写无状态组件。

GPU云服务器云服务器编程和c语言分别是分别什么时候用三大云服务器平台分别是 html中节点是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91832.html

[React技术内幕] key带来了什么

摘要：启发式算法了解一下什么是启发式算法启发式算法指人在解决问题时所采取的一种根据经验规则进行发现的方法。这将会造成极大的性能损失和组件内的丢失。但这都是的内部实现方式，可能在后序的版本中不断细化启发式算法，甚至采用别的启发式算法。　　首先欢迎大家关注我的掘金账号和Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　大家在使用R...

cnTomato 2019-08-20 19:08 评论0 收藏0
谈一谈创建React Component的几种方式

摘要：用这种方式创建组件时，并没有对内部的函数，进行绑定，所以如果你想让函数在回调中保持正确的，就要手动对需要的函数进行绑定，如上面的，在构造函数中对进行了绑定。当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候...

mylxsw 2019-08-20 14:24 评论0 收藏0
用好React，你必须要知道的事情

摘要：属性如何获取，是容器性组件负责的事情。所以，不要依赖和的值计算下一个状态。也可以使用带用回调函数参数版本的，回调函数中的会保证是最新的。当返回时，组件本次的方法不会被触发。容器性组件（container component）和展示性组件（presentational component）使用React编写组件时，我们需要有意识地将组件划分为容器性组件（container compo...

vvpvvp 2019-08-20 18:13 评论0 收藏0
React 实践心得：react-redux 之 connect 方法详解

摘要：但这并不是最佳的方式。最佳的方式是使用提供的和方法。也就是说，与的与完全无关。另外，如果使用对做属性类型检查，方法和方法为添加的属性是存在的。注意，的变化不会引起上述过程，默认在组件的生命周期中是固定的。转载注：本文作者是淘宝前端团队的叶斋。笔者非常喜欢这篇文章，故重新排版并转载到这里，同时也加入了一些自己的体会。原文地址：http://taobaofed.org/blog/...

张春雷 2019-08-22 17:32 评论0 收藏0
React loves you —“洞悉Redux装的逼”

摘要：就是那个将要全权代管你所有组件的那家伙用的自述来说就是是状态容器，提供可预测化的状态管理。你若装逼，请带我飞！ I love React ! 从前，从前，听说React只负责UI，话说写Angular代码就像写后端，现在看来，React赢在情怀上了；我认为没必要老是拿React和Angular做比较，Angular是一套大而全的相对完备的框架；而React确实是只负责UI，只是多出...

chaos_G 2019-08-21 14:18 评论0 收藏0