在React中，数据是自顶向下活动的（称为单项数据流），从父组件通报到子组件。因而组件是简朴且易于把握的，它们只需从父节点猎取props衬着即可。假如顶层组件的某个prop转变了，React会递归向下遍历全部组件树，重新衬着一切运用这个属性的组件。
然而在React中出了props以外另有自身的状况，这些状况只能在组件内修正，那这个状况就是state
props:就是properties的缩写，你能够运用它把恣意范例的数据通报给组件(浅显一点就是，能够当做要领通报的参数)
state:当前组件内部数据
props
能够在挂载组件的时刻设置它的props
<Component title="题目" />
var data = {
name : "刘宇",
title : "题目"
};
<Component {...data} />
在组件内部挪用的话就是运用 this.props
//Comment.js
import React, { Component } from 'react';、
import './Comment.css';
class Comment extends Component {
render() {
return (
<div className="Comment">
{/**接收参数**/}
{this.props.name}
{/**接收子节点**/}
{this.props.children}
</div>
);
}
}
export default Comment;
//App.js
class App extends Component {
render() {
return (
<div className="App">
{/**挪用组件**/}
<Comment name="刘宇" /**通报参数**/>组件插进去内容{/**子节点**/}</Comment>
</div>
);
}
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
propTypes
propTypes用于范例props的范例与必需的状况。假如组件定义了propTypes,那末在开辟环境下，就会对组件的props值的范例作搜检，假如传入的props不能与之婚配，React将及时在控制台里报warning（正告）；
static propTypes = {
// 你能够定义一个js原始范例的prop,默许请情况下，这是都是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// 任何能够衬着的东西：数字，字符串，元素或数组（或片断）。
optionalNode: React.PropTypes.node,
// React元素
optionalElement: React.PropTypes.element,
// 你也能够声明prop是某个类的实例。 内部运用的是JS的instanceof运算符。
optionalMessage: React.PropTypes.instanceOf(Message),
// 你能够经由过程将它作为罗列来确保你的prop被限定到特定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 能够是很多范例之一的对象
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 某种范例的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 具有某种范例的属性值的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 采用特定款式的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 你能够用`isRequired`来衔接到上面的任何一个范例，以确保假如没有供应props的话会显现一个正告。
requiredFunc: React.PropTypes.func.isRequired,
// 任何数据范例
requiredAny: React.PropTypes.any.isRequired,
// 您还能够指定自定义范例搜检器。 假如搜检失利，它应当返回一个Error对象。 不要`console.warn`或throw，由于这不会在`oneOfType`内事情。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 您还能够为`arrayOf`和`objectOf`供应自定义范例搜检器。 假如搜检失利，它应当返回一个Error对象。
// 搜检器将为数组或对象中的每一个键挪用考证函数。
// 搜检器有两个参数，第一个参数是数组或对象自身，第二个是当前项的键。
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
//以上是ES6的写法，假如运用的是createClass
MyComponent.propTypes = {
//同上
}
请求只能是单个子元素
class MyComponent extends React.Component {
render() {
// 只能包括一个子元素，不然会给出正告
const children = this.props.children;
return (
<div>{children}</div>
);
}
}
MyComponent.propTypes = {
children: React.PropTypes.element.isRequired
}
getDefaultProps和defaultProps
能够为组件增加getDefaultProps来设置属性的默许值。
//es6写法
class Comment extends Component {
//设置默许props值
static defaultProps = {
name:"默许值"
}
render() {
return (
<div className="Comment">
{/**接收参数**/}
{this.props.name}
{/**接收子节点**/}
{this.props.children}
</div>
);
}
}
var Comment = React.createClass( {
//设置默许props值
getDefaultProps : {
name:"默许值"
},
render : function(){
return (
<div className="Comment">
{/**接收参数**/}
{this.props.name}
{/**接收子节点**/}
{this.props.children}
</div>
);
}
})注重：props能够接见不能够修正，假如须要修正，请运用state
state
state是组件内部的属性。组件自身是一个状况机，他能够在constructor中经由过程this.state直接定义他的值，然后依据这些值来衬着差别的UI,当state的值发作转变时，能够经由过程this.setState要领让组件再次挪用render要领，来衬着新的UI.
var Comment = React.createClass( {
//设置state值
getInitialState : {
num:0
},
addNum : function(){
var num = this.state.num++;
this.setState({
num:num
})
},
render : function(){
return (
<div className="Comment">
<button onClick>{this.state.num}</button>
</div>
);
}
})
//es6写法
class Comment extends Component {
constructor(props) {
super(props);
this.state = {
num : 0
};
this.addNum = this.addNum.bind(this)
}
addNum() {
var num = this.state.num++;
this.setState({
num:num
})
}
render() {
return (
<div className="Comment">
<button onClick>{this.state.num}</button>
</div>
);
}
}