【八股系列】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>
    );
  }
}
相关推荐
这人是玩数学的1 分钟前
在 Cursor 中规范化生成 UI 稿实践
前端·ai编程·cursor
UncleKyrie2 分钟前
🎨 市面上主流 Figma to Code MCP 对比
前端
李明卫杭州4 分钟前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚9 分钟前
栈溢出优化
javascript
南半球与北海道#15 分钟前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
然我22 分钟前
React 16.8:不止 Hooks 那么简单,这才是真正的划时代更新 🚀
前端·react.js·前端框架
小高00735 分钟前
📈前端图片压缩实战:体积直降 80%,LCP 提升 2 倍
前端·javascript·面试
OEC小胖胖38 分钟前
【React Hooks】封装的艺术:如何编写高质量的 React 自-定义 Hooks
前端·react.js·前端框架·web
BillKu1 小时前
vue3+element-plus 输入框el-input设置背景颜色和字体颜色,样式效果等同于不可编辑的效果
前端·javascript·vue.js
惊悚的毛毛虫1 小时前
掘金免广告?不想看理财交流圈?不想看exp+8?
前端