版权声明：本文为博主原创文章，未经博主允许不得转载。

二者区别

state 和props 主要的区别在于子组件通过props来传递数据，一旦外部传入数据后， props 不可改变。
而 state作为状态私有，受控于当前组件，可以根据与用户交互来改变,但也不能随意改变。

React props使用

1. 新建一个组件，组件内创建使用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使用

1. 新建一个组件，需要额外增加使用构造方法constructor,携带参数props,constructor内部使用super(props)继承该方法参数，在底部进行state值的设置。

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

1. 执行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>)}
复制代码

1. 进行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;
复制代码

效果展示