专栏首页Web前端开发React中的State与Props

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
    })
  }
}

setState 是异步的,如果接收第二个参数,其内容会在第一个参数调用完成后被调用

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 是外部传入的数据,不可改变

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Koa Cookie 的设置与获取

    刷新 http://localhost:3000/json 自动获取 Cookie:

    Leophen
  • TypeScript 类型注解和类型推断

    当不添加类型注解时,TypesScript 也能知道变量 a 是一个数字,这就是 TypeScript 的类型推断:

    Leophen
  • Vue路由实现页面跳转的两种方式(router-link和JS)

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用

    Leophen
  • react --- React中state和props分别是什么?

    组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,...

    小蔚
  • React基础(6)-React中组件的数据-state

    一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的...

    itclanCoder
  • 【React学习笔记】React生命周期梳理(16.X前后两种)

    props属性是从父组件传过来的。当父组件改变了传递给子组件的数据时,子组件内部就会触发该函数。 以下流程发生在子组件内部:子组件内部

    xing.org1^

扫码关注云+社区

领取腾讯云代金券