【八股系列】React中props和state的区别是什么?

Reactpropsstate的区别是:

  1. props是用来从父组件向子组件 进行传递数据的,在子组件中可以用props来接收到父组件传递过来的参数。
  2. props不可变 的,用户不能在子组件中修改props的值,因为从父组件中传递过来的值被认为是不可变数据。
  3. state表示的组件的内部状态 ,是私有数据
  4. state可变 的,用户可以通过setState等来修改数据 ,且React会根据state的修改重新进行组件的渲染。

示例代码:

js 复制代码
// 父组件
class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent name="John" age={25} />
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}
相关推荐
前端太佬5 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术13 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话30 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys32 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话33 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村39 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501743 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬1 小时前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼1 小时前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html