state

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。

state工作原理
常用的通知React數據變化的方法是調用setState(data,callback).這個方法會合并data到this.state,并重新渲染組件.渲染完成后,調用可選的callback回調.大部分情況不需要提供callback,因為React會負責吧界面更新到最新狀態.
常用的模式就是創建多個只負責渲染數據的無狀態(stateless)組件,在他們的上層創建一個有狀態(stateful)組件并把它的狀態通過props傳給子級.有狀態的組件封裝了所有的用戶交互邏輯,而這些無狀態組件只負責聲明式地渲染數據.
下面使用es6的class的方式實現一個likedbutton

import React from 'react'; import ReactDOM from 'react-dom';class LikedButton extends React.Component {constructor(props) {super(props);this.state = {liked : props.liked || false}this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({liked: !this.state.liked});}render() {var text = this.state.liked ? '喜歡' : '不喜歡';return (<div onClick={this.handleClick}>Your text is {text}. Click to say.</div>);} }LikedButton.propTypes = {liked : React.PropTypes.boolean }LikedButton.defaultprops = {liked: false }ReactDOM.render(<LikedButton/>,document.getElementById('app') );

props

組件中的props是一種父級向子級傳遞數據的方式.
state 和 props 主要的區別在于 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。
可以通過 getDefaultProps() 方法為 props 設置默認值
Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。

驗證器說明

propTypes: {// 可以聲明 prop 為指定的 JS 基本數據類型，默認情況，這些數據是可選的optionalArray: React.PropTypes.array,optionalBool: React.PropTypes.bool,optionalFunc: React.PropTypes.func,optionalNumber: React.PropTypes.number,optionalObject: React.PropTypes.object,optionalString: React.PropTypes.string,// 可以被渲染的對象 numbers, strings, elements 或 arrayoptionalNode: React.PropTypes.node,// React 元素optionalElement: React.PropTypes.element,// 用 JS 的 instanceof 操作符聲明 prop 為類的實例。optionalMessage: React.PropTypes.instanceOf(Message),// 用 enum 來限制 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),// 特定 shape 參數的對象optionalObjectWithShape: React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}),// 任意類型加上 `isRequired` 來使 prop 不可空。requiredFunc: React.PropTypes.func.isRequired,// 不可空的任意類型requiredAny: React.PropTypes.any.isRequired,// 自定義驗證器。如果驗證失敗需要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Validation failed!');}}},/* ... */ });

總結

以上是生活随笔為你收集整理的react学习系列之states与props的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。