一文讲清楚React中state和props的区别与联系

一文讲清楚React中state和props的区别

1.共同点

• 往上有各种关于state和props的解释，各式各样，我这里为了大家更好的理解，总结一句话，页面要变化，数据就得变化，数据变化的来源分为state和props

• 也就是说，state和props的改变都能造成React组件的重新渲染

• 这就是他们的共同点

• 比如,我们在App.jsx写如下代码（这里默认已经有react项目了，不会react项目构建的看这篇文章）

  import React from 'react'
  class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            num:0
        }
    }
    handleClick=()=>{
        this.setState({
            num:this.state.num+1
        })
    }
    render(){
        return(
            <div>
                <div>{this.state.num}</div>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
  }
  export default App
  

  • 运行后，页面呈现如下
    

  • 此时的state里面的num为0，然后我们点击+1按钮，通脱handleClick把state.num+1之后变为了1；这时候页面就重新渲染了
    

• 接下来我们演示props，我们新建一个Show组件，并且在App组件里面引入Show组件，通过props给Show组件传入num，Show组件接收到num后展示出来。然后我们在App组件里面改变Show组件num的传值，也就是改变Show组件的props，看改变后的num是否会显示

• App.jsx

  import React from 'react'
  import Show from './Show'
  class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            num:0
        }
    }
    handleClick=()=>{
        this.setState({
            num:this.state.num+1
        })
    }
    render(){
        return(
            <div>
                
                <Show num={this.state.num}/>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
  }
  export default App

• Show组件

import React from 'react'
class Show extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>{this.props.num}</div>
        )
    }
}
export default Show

• 我们运行后，效果如下
  

• 然后我们点击+1按钮，给props+1后，效果如下
  

• 从上面的例子我们可以发现，state和props的改变都可以使页面重新渲染更新

2.异同点

2.1 state

• state 属于组件的内部状态，由组件内部创建和管理，不受外部的影响。一般在constructor中初始化
• 当需要修改state的值时，通过调用setState方法来改变，并且会重新调用组件的render方法，实现重新渲染
• 比如我们要修改state中num的值
• 就会通过下面的方法去实现

setState({
    num:this.state.num+1
})

• 当然，setState还可以接受第二个functions参数，会在setState调用完成并且组件开始重新渲染时被调用，可以监听渲染是否完成

this.setState({
    ![alt text](image-1.png)
},()=>console.log('render finished'))

2.2 props

• props是从组件外部传入组件内部的一个值，在react中，每一个组件的本质是一个参数的函数，这个参数就是props，react具有单向数据流的特性，所以props的主要作用是父组件向子组件传值。
• props可以是字符串、数字、对象甚至是回调函数
• 在子组件内，props是不可以被修改的，如果想要他的值变化，只能通过父组件传入新的值够来
• 比如下面的语句就是错误的

    this.props.num=this.props.numm+1

3.总结

• state和props都是对象，都用于保存信息
• state和props都能触发渲染更新
• state是组件内部的状态，props是外部传入的状态
• state在组件内部是可以被修改的，props不可以