关于props和state(React)

  React的数据模型分为共有数据和私有数据,共有数据可以在组件间进行传递,私有数据为当前组件私有。共有数据在React中使用props对象来调用,它包含标签所有的属性名称和属性值,props对象有三个特性,单向流动性、显示传递性和只读性。单向流动性是指React的数据只能由父组件传递到子组件,而不能由子组件传递到父组件;显示传递性是指必须明确地在子组件中通过属性赋值,数据才可以传递到子组件;只读性是指props数据是只读的,数据修改后并未改变原始的数据模型,而是会新生成一份数据模型,并将新的数据模型加载到原始父元素,从而完成数据的传递和组件状态的更改。私有数据为组件私有,在React使用state对象来调用,state数据模型可以方便地进行更新操作,并且不会影响到其他组件。

  需要理解的是,props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态(可以是父组件、子孙组件)。改变一个组件自身状态,从语义上来说,就是这个组件内部已经发生变化,有可能需要对此组件以及组件所包含的子孙组件进行重渲染。而props是父组件传递的参数,可以被用于显示内容,或者用于此组件自身状态的设置(部分props可以用来设置组件的state),不仅仅是组件内部state改变才会导致重渲染,父组件传递的props发生变化,也会执行。

  既然两者的变化都有可能导致组件重渲染,所以只有理解props与state的意义,才能很好地决定到底什么时候用props或state。

时间: 2024-10-11 23:30:26

关于props和state(React)的相关文章

React Native 快速入门之认识Props和State

眼下React Native(以后简称RN)越来越火,我也要投入到学习当中.对于一个前端来说,还是有些难度.因为本人觉得这是一个App开发的领域,自然是不同.编写本文的时候,RN的版本为0.21.0.我们马上以代码进入今天的学习. 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class Hello extends Component { re

A Bite Of React(2) Component, Props and State

component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 遇到自己定义的component Welcom,React会将它的属性(name)作为对象传递给组建Welcom,即{

React中Props 和 State用法

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C

react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes 或者纯 函数时,这种自动绑定就不复存在了,我们需要手动实现 this 的绑定. 1.bind方法进行绑定,这个方法可以帮助我们绑定事件处理器内的 this ,并可以向事件处理器中传 递参数,如下图清晰明了: bind方法绑定 2.箭头函数进行绑定,箭头函数不仅是函数的“语法糖”,它还自动绑定了定义

关于reactjs的props和state之间的区别

props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. 1.State(由内部改变的) 如果component的某些状态需要被改变,并且会影响到component的render,那么这些状态就应该用state表示.例如:一个购物车的component,会根据用户在购物车中添加的产品和产品数量,显示不同的价格,那么“总价”这个状态,就应该用state表示. 2.Props(由外部传送的) 如果component的某些状态由外部所决定,并且会影响到compone

react关于props和state举个例子

var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, handleClick: function() { this.setState({count: this.state.count + 1}); }, render: function() { return <div onClick={this.handleClick}>{this.

react 的props和state

props 当前组件的组件标签身上的所有属性和子节点构成的集合: 可以用来组件传递数据,一般用于父子组件之间: this.props对象的属性与组件的属性一一对应,但对于组件标签的子节点,this.props.children属性的值有三种可能: 1.如果当前组件没有子节点,为underfined: 2.如果有一个子节点,类型为object: 3.如果是多个子节点,就为array.react提供一个工具方法,React.Chilren来处理this.props.children.可以用React

React Native的props和state的介绍

this.props 可以通过将属性传递给构造函数constructor来实例化组件,这些属性就叫做props.在组件渲染的时候,可以通过this.props访问该组件的属性.但是不在组件方法里面修改props. 该组件的父元素一般会修改它孩子的属性,然后孩子重新渲染将这些属性展现出来.当然,孩子不一定重新渲染,具体看shouldComponentUpdate()方法的返回值,该方法的默认值是返回值true,也就是默认会重新渲染.孩子可以重写该方法返回false,就不会重新渲染,一般这样做是为了

React系列--三大属性 props refs state

https://blog.csdn.net/ImagineCode/article/details/82429819 props:组件外部向组件内部传值用,标签属性都挂载在 props上, <AddTodo    add={this.add}          length={todos.length}/> AddTodo 组件内部就可以使用 props来获取值, this.props.length         组件内部也可以获取外部传递的方法, this.props.add(xxx) /