React中的State与Props

一、State

1、什么是 state

一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props

2、state 的使用

组件初始化时,通过 this.state 给组件设置一个初始的 state,在第一次 render 时就会用这个数据渲染组件

class ItemList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: ‘123‘
    };
  }
  render() {
    return ({
      this.state.data
    })
  }
}

3、setState 修改数据

state 可以通过 this.setState() 来修改数据,注意:调用 this.setState 方法时,React 会重新调用 render 方法

class ItemList extends React.Component {
  constructor() {
    super();
    this.state = {
      name: ‘hainiudd‘,
      age: 21,
    }
  }
  componentDidMount() {
    this.setState({
      age: 22
    })
  }
}

4、总结

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

二、Props

1、什么是 props

props 可以理解为从外部传入组件内部的数据

2、props 的使用

父组件通过自定义属性进行传值,这里以传 lastName 的值为例:

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child lastName=‘Liu‘ />
      </div>
    )
  }
}

子组件通过 this.props 获取,这里接收父组件传过来 lastName 的值

Child.js

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    return (
      <div>
        <h1>My lastname is {this.props.lastName}</h1>
      </div>
    )
  }
}

渲染父组件:

ReactDOM.render(
  <div><Parent /></div>,
  document.getElementById(‘root‘)
);

运行结果:

3、props 的只读性

组件无论是使用函数声明还是 class 声明,都不能改变自身的 props,只有通过父组件重新渲染才可以把新的 props 传入组件中

4、总结

Props 是一个从外部传入组件的参数,用于父组件向子组件传递数据,具有可读性

三、State 与 Props 的区别

1、State 是组件自身的数据,可以改变

2、Props 是外部传入的数据,不可改变

原文地址:https://www.cnblogs.com/Leophen/p/11324370.html

时间: 2024-10-13 03:54:40

React中的State与Props的相关文章

React中的state与props的再理解

props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.

如何理解react中的super(),super(props)

用es6的class(类)的方法创建组件: 子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this); 如果像上图一样需要定义props的属性 this.props.xixi="哈哈",则需要用 super(props) 如果不定义props的属性,只定义状态this.state ,就可以直接super(); 这是为什么呢? 其实很简单,因为this.props必须要是一个对象,才能在它下面定义属性 而constructor(props){}传

react中使用prop-types检测props数据类型

一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示.这样在工作中可以快速找到错误. 二.学习文档 https://www.npmjs.com/package/prop-types npm官网https://r

React中state和props分别是什么?

[转]https://segmentfault.com/a/1190000011184076 整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中,这两个属性有啥子区别呢? props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看

Immutable 详解及 React 中实践

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟.

React中Props 和 State用法

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

【React自制全家桶】四、React中state与props的分析与比较

一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作原理 常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,

React应用程序设计过程中如何区分模块到底是state还是props?

根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn't state. 2.Does it remain unchanged over time? If so, it probably isn't state. 3.Can you compute it based on any other state or props in your componen

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co