React/Documentation

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者构建快速、高效和可维护的 UI。以下是一些关于 React 文档的基本信息。

快速开始

想要快速开始使用 React 吗？请访问我们的快速开始指南。

文档结构

• React 基础
• 组件与 JSX
• 状态与生命周期
• 上下文与 props
• 高级指引

React 基础

React 的核心概念是组件。组件是可复用的代码块，它接收输入（props）并返回用于渲染的输出。

React 组件可以非常简单，例如：

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

const element = <Welcome name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));

在上面的例子中，Welcome 是一个组件，它接收一个名为 name 的 prop，并显示一个欢迎消息。

组件与 JSX

JSX 是一种 JavaScript 的语法扩展，它看起来类似于 HTML。它允许你在 JavaScript 中使用 HTML 标签。

const element = <h1>Hello, world!</h1>;

在上面的例子中，<h1> 是一个 JSX 标签，它会在 React 中被解析为一个 DOM 元素。

状态与生命周期

React 组件可以通过 state 和 props 来管理数据。state 是组件内部的数据，而 props 是从父组件传递给子组件的数据。

组件的生命周期方法允许你在组件的不同阶段执行代码，例如在组件挂载后或卸载前。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

上下文与 props

React 提供了 Context API，它允许你将值从一个组件“传递”到另一个组件，而不必一层层手动地通过 props 传递。

const value = { name: 'Alice' };

function MyComponent() {
  // 使用 Context 的值
  const name = useContext(MyContext);
  return <h1>Hello, {name}!</h1>;
}

高级指引

React 还提供了许多高级指引，例如：

• 高级组件
• [错误边界](/Error Boundaries)
• [高阶组件](/Higher-Order Components)

更多高级指引，请访问我们的高级指引文档。

React Logo