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

举报
超梦 发表于 2024/07/12 09:58:45 2024/07/12
【摘要】 React 是一个用于构建用户界面的 JavaScript 库,特别擅长创建可复用的组件。掌握组件、Props 和 State 的概念是学习 React 的基石。本文将深入浅出地探讨这些核心概念,包括常见问题、易错点以及如何避免这些问题,并附带代码示例。 1. 组件(Component)组件是 React 中的基本构建单元,可以理解为 UI 的独立部分,每个组件负责渲染页面的一部分。组件可以...

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 应用程序。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。