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

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

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