一、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