讲讲React中的State和Props

基本概念

在React中，组件的数据存储在props和state中。
一个组件的显示形态可以由数据状态和外部参数所决定。

外部参数——props

组件从概念上可以理解为一个函数，因为函数也是封装一个独立可复用的功能，而props就可以理解为函数接收的参数。
props为从外部传入组件内部的数据。
特性
- 只读性
- 不变性
- 在子组件中，props在内部不可变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变

数据状态——state

在组件初始化时，会根据constructor()中this.state定义的状态值来初始化组件。
不用与props的只读性，可以通过this.setState()来变更state的值，触发重新渲染。
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它可以理解为组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

props和state的相同点及区别

相同点
- props 和 state 都能触发渲染更新
区别
- props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
- props 在组件内部是不可修改的，但 state 在组件内部可以进行修改

讲讲React中的State和Props相关推荐

React中的state和props有什么区别？
本文翻译自:What is the difference between state and props in React? I was watching a Pluralsight course o ...
react中的state、props、ref
state state顾名思义就是状态,它只是用来控制这个组件本身自己的状态,我们可以用state来完成对行为的控制.数据的更新.界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变 ...
React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
[react] react组件的state和props两者有什么区别？
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...
如何理解react中的super(),super(props)
用es6的class(类)的方法创建组件: 子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this); 如果像上图一样需要定义props的属性 this.pr ...
react中的state详解
state 理解:state是组件对象最重要的属性,值是对象(可以包含多个key-value组合) state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 t ...
用react中的state写一个按钮+弹框的程序
题目:在页面上有一个按钮,点击按钮出现一个旋转的loading,提交按钮不可点击,等待一秒后弹框显示提交失败或者提交成功,接下来我们直接开始在此之前,我相信您已经安装好了react运行环境,如何创建 ...
Immutable 详解及 React 中实践 1
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
react中props详解
1.props的基本使用 react组件之间的传值,是离不开props的代码展示: export default class Parent extends Component {render() { ...

讲讲React中的State和Props

基本概念

外部参数——props

数据状态——state

props和state的相同点及区别

讲讲React中的State和Props相关推荐

最新文章

热门文章