版權聲明：本文為博主原創文章，未經博主允許不得轉載。

二者區別

state 和props 主要的區別在于子組件通過props來傳遞數據，一旦外部傳入數據后， props 不可改變。
而 state作為狀態私有，受控于當前組件，可以根據與用戶交互來改變,但也不能隨意改變。

React props使用

新建一個組件，組件內創建使用this.props.name

class HelloMessage extends React.Component {render() {return (<h1>Hello, {this.props.name}</h1>);}} 復制代碼

2.組件內使用的this.props.name需要通過外部數據傳入，即在使用該組件時，需要進行值的傳入。

<HelloMessage name='Liming' /> 復制代碼

React state使用

新建一個組件，需要額外增加使用構造方法constructor,攜帶參數props,constructor內部使用super(props)繼承該方法參數，在底部進行state值的設置。

constructor(props){super(props)this.state = {likes:0}} 復制代碼

執行render函數進行組件渲染。在class中，this不會自動綁定到相應的類，需要手動進行綁定，若使用JavaScript語法，那么需要在步驟1中的constructor內部額外增加。(下面的addNum作為點擊事件時執行的函數，大體邏輯功能為點擊點贊按鈕時進行加1操作)

• ES5寫法

constructor(props){super(props)this.state = {likes:0}this.addNum = this.addNum.bind(this) //ES6使用箭頭函數不需要此步驟}<button onClick = {this.addNum}>點贊{this.state.likes}</button> 復制代碼

• ES6中使用箭頭函數() => {}方式，可以自動綁定到類，不需要再額外手動綁定。

render() {return (<div><button onClick = {() => {this.addNum()}}>點贊{this.state.likes}</button></div>)} 復制代碼

進行state值得狀態更新時，不能直接修改，需要通過this.setState進行修改，以addNum方法為例。

addNum(){this.setState({likes: ++this.state.likes //使用this.setState()進行狀態更新，++this.state.likes+1等同于this.state.likes+1})} 復制代碼

附兩個文件源碼：

APP.js

import React from 'react';import './App.css';import LikesButton from './components/LikesButton';function App() {return (<div className="App"><LikesButton /></div>);}export default App; 復制代碼

LikesButton.js

import React from 'react';class LikesButton extends React.Component{constructor(props){super(props)this.state = {likes:0}}addNum(){this.setState({likes:++this.state.likes})}render(){return (<div><button onClick = {() => {this.addNum()}}>點贊{this.state.likes}</button></div>)}}export default LikesButton; 復制代碼

效果展示

轉載于:https://juejin.im/post/5ce74d816fb9a07ee1690255

總結

以上是生活随笔為你收集整理的前端框架--React props与React state的全部內容，希望文章能夠幫你解決所遇到的問題。

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