前端框架--React props与React state

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

二者区别

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
        }
    }

2. 执行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>
        )
    }

3. 进行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;

效果展示