React中props与state的区别

首先，props与state是React组件的两种方法。

props，可以在组件中来获取this.props的属性。

var Helloreact=React.createClass({render:function(){return <h1>Hello {this.props.name}</h1>}
});
ReactDOM.render(<Helloreact name="BOOM" />,document.getElementById('example2')
);      //Hello BOOM

2.state，获取的是更新后的数据，是通过用户的状态来更改state。

var Helloreact=React.createClass({getInitialState : function(){return {name:'BOOM'};},render:function(){return <h1>Hello {this.state.name}</h1>}
});
ReactDOM.render(<Helloreact/>,document.getElementById('example2')
);    //Hello BOOM

3.在这里，可以通过props获取组件的属性，然后用state动态的更新。

 var HelloMe = React.createClass({getDefaultProps:function(){return{value:'props'};},getInitialState : function(){return {value:'state'};},handleChange:function(event){this.setState({value:event.target.value});},clickhandle:function(event){this.setState({value:" "});},render:function(){var value= this.state.value;return  <div><input type="text" value={value} onChange={this.handleChange}/><h1>Hi {this.props.value} {value}</h1><button onClick={this.clickhandle}>清除{value}</button></div>;}});ReactDOM.render(<div style={myStyle}><HelloMe/></div>,document.getElementById('example1'));

所以言之，相对于静态的状态下使用props会更好一些，动态的数据就需要使用state，

而React中，是虚拟的DOM树，是遍历全局后对数据进行对比，然后运算使用最快的方法进行的渲染。

转载于:https://blog.51cto.com/shiqidelvtu/1919484

React中props与state的区别相关推荐

React中pros和state的区别
props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件. state代表的是一个组件内部自身的状态(可以是父组件.子孙组件). state 和 props 主要的区别在于 pro ...
[react] 在React中组件的state和setState有什么区别？
[react] 在React中组件的state和setState有什么区别? state:初始化状态 setState:对状态进行更新个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
react中的this.state与this.setState的区别
在react中,this.state与this.setState是由明显区别的,this.state是用来初始化state的,而this.setState是用来修改state的值的. 下面让我们用一个 ...
props 和 state的区别
作者:孙志勇微博日期:2016年11月29日一.时效性所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时 ...
react中props详解
1.props的基本使用 react组件之间的传值,是离不开props的代码展示: export default class Parent extends Component {render() { ...
react中props的使用
在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面: 1,子组件调用父组件的方法 (1)子组件要拿到父组件的属性,需要通过 this.props 方法. ...
前端学习（2307）：react之props和state
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
React 中hashhistory 与 browserhistory 的区别
在react中使用 hashHistory,浏览器上看到的 url 会是这样的: /#/home-page?_k=vyqwnx 在react中使用 browserHistory,浏览器上看到的 url ...
react 的props和state
props 当前组件的组件标签身上的所有属性和子节点构成的集合: 可以用来组件传递数据,一般用于父子组件之间: this.props对象的属性与组件的属性一一对应,但对于组件标签的子节点,this.p ...

React中props与state的区别

React中props与state的区别相关推荐

最新文章

热门文章