前端框架与库 - React基础:组件、Props、State

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
性能测试 PTS,5000VUM额度
云原生网关 MSE Higress,422元/月
简介: 【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。

React 是一个用于构建用户界面的 JavaScript 库,特别擅长创建可复用的组件。掌握组件、Props 和 State 的概念是学习 React 的基石。本文将深入浅出地探讨这些核心概念,包括常见问题、易错点以及如何避免这些问题,并附带代码示例。
image.png

1. 组件(Component)

组件是 React 中的基本构建单元,可以理解为 UI 的独立部分,每个组件负责渲染页面的一部分。组件可以是函数或类,但在现代 React 中,函数组件更受欢迎,因为它们简洁且易于理解。

易错点:组件命名应遵循首字母大写的规则,否则 React 会将其视为自定义标签处理。

避免方法:确保所有组件名称首字母大写。

代码示例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

2. Props(属性)

Props 是传递给组件的参数,类似于函数的参数。它们是只读的,不能在组件内部被修改。Props 使得组件之间能够传递数据,增加了组件的复用性。

易错点:忘记传递必要的 Props 可能导致组件无法正常显示或抛出错误。

避免方法

  • 使用默认 Props (defaultProps) 或 Props 类型检查 (propTypes) 来确保组件接收正确的 Props。
  • 在组件内部使用 props.children 来允许子组件的传递。

代码示例

class Avatar extends React.Component {
  render() {
    return (
      <img src={this.props.src} alt={this.props.alt} />
    );
  }
}

Avatar.defaultProps = {
  src: 'default-avatar.jpg',
  alt: 'Default Avatar'
};

function App() {
  return (
    <div>
      <Avatar src="sara.png" alt="Sara" />
      <Avatar /> {/* 使用默认 Props */}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

3. State(状态)

State 是组件内部的状态,它可以在组件生命周期中改变,从而触发组件的重新渲染。与 Props 不同,State 是可变的,通常用于存储组件的动态数据。

易错点:直接修改 State 而不是使用 setState() 方法会导致组件不会重新渲染。

避免方法

  • 总是使用 setState() 方法更新 State。
  • 避免在 setState() 的回调函数中访问 State,因为 State 更新可能是异步的。

代码示例

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

结论

React 的组件、Props 和 State 构成了其核心机制,理解并正确使用它们是开发高质量 React 应用的关键。通过遵循上述指导原则,你可以避免常见的错误,构建出既健壮又易于维护的 React 应用程序。

目录
相关文章
|
3天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
22 8
|
2天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
20 9
|
1天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
15 6
|
8天前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
26 1
|
9天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
24 2
|
10天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
10天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
23 2
|
10天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
12天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
20 1
|
3天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
10 0