React开发之Porps和State

最近项目一直在用React，所以把自己学的东西都总结下来。

前言

在实际开发中，我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

Props概念：大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。

下面是我写的一个TextInput自定义组件：

import React from 'react';

class TextInput extends React.Component{
render () {
var {value, placeholder, updateValue} = this.props;
return (
<div>
<input placeholder={placeholder} value={value} onChange=    {(event)=>{updateValue(event.target.value)}}/>
</div>
);
}
}

TextInput.propTypes = {
value: React.PropTypes.string.isRequired,
updateValue: React.PropTypes.func.isRequired,
placeholder: React.PropTypes.string
};

TextInput.displayName = 'TextInput';

export default TextInput;

State概念：用来更新需要改变的数据。实际开发中，我们一般不会在定时器函数（setInterval、setTimeout等）中来操作State。

一般来说，你需要在constructor中初始化state，然后在需要修改时调用setState方法。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };

// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}

render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}

class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}

以上编码全部采用ES6规范，ES5已经逐渐被淘汰了，大家以后编码就按照ES6标准写吧，后续会整理一篇ES6规范，期待一下。。。