学习笔记──React──基本概念

1. JSX

描述

JSX 是一个 JavaScript 的语法扩展，长得很像 HTML。它被用来描述 UI 的结构，React 元素使用 JSX 来创建。

详细解释

JSX 看起来像模板语言，但它充分利用了 JavaScript 的能力。每个 JSX 元素都被编译成 React.createElement 调用，可以在浏览器中高效运行。

示例

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

这个 JSX 代码会被编译成：

const element = React.createElement('h1', null, 'Hello, world!');

2. 组件

描述

组件是 React 应用的基础。组件可以是类组件或函数组件，每个组件都可以接受输入（即 props），并返回要显示的 React 元素。

详细解释

组件让你可以将 UI 拆分为独立、可复用的代码片段，并对每个片段进行隔离管理。函数组件是用 JavaScript 函数定义的，类组件是用 ES6 类定义的。

示例

函数组件：

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

类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

3. Props

描述

Props 是组件的输入参数，类似于函数的参数。它们是通过组件实例的属性传递给组件的。

详细解释

Props 是只读的。无论是函数组件还是类组件，组件都不应该修改自己的 props。组件可以根据 props 的不同来渲染不同的内容。

示例

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

const element = <Welcome name="Sara" />;

在这个例子中，Welcome 组件使用了传递给它的 name prop。

4. State

描述

State 是组件的本地状态，组件通过 this.state 初始化，并通过 this.setState 更新。

详细解释

与 props 不同，state 是私有的，并且完全由组件自身管理。State 通常用于需要在用户交互时发生变化的数据。

示例

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>
    );
  }
}

在这个例子中，Clock 组件维护自己的 state，state 随时间变化。

5. 事件处理

描述

React 元素上的事件处理非常类似于 DOM 元素上的事件处理，使用 CamelCase 语法来命名事件。

详细解释

在 React 中，你可以直接在 JSX 中使用事件处理函数。事件处理函数一般是通过箭头函数或 bind 方法绑定的。

示例

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };

    // 这个绑定是必要的，使 `this` 在回调中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

6. 条件渲染

描述

在 React 中，可以根据条件来决定是否渲染某些内容。

详细解释

你可以使用 JavaScript 的条件运算符，比如 if 或三元运算符来实现条件渲染。

示例

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

7. 列表和键

描述

当你需要渲染一个列表时，你可以使用 JavaScript 的 map() 方法。

详细解释

在渲染列表时，React 需要一个唯一的 key 来标识每个列表项，以便高效地更新和重排列表。

示例

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

在这个例子中，每个 li 元素都有一个 key 属性，它的值是列表项的唯一标识。

8. 表单

描述

在 React 中，表单元素（如 <input>, <textarea> 和 <select>）的处理方式稍有不同。

详细解释

React 表单元素的值通过组件的 state 来管理，表单元素的 value 属性与组件的 state 绑定，并在表单元素的 onChange 事件处理函数中更新 state。

示例

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

9. 提取组件

描述

将 UI 拆分成独立、可复用的组件，使每个组件只关注一件事情。

详细解释

提取组件可以使代码更容易维护和复用。根据应用逻辑和 UI 的重复使用情况来提取组件。

示例

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name} />
  );
}

10. 组合 vs 继承

描述

React 有强大的组合模型，通过 props 和 children 属性进行组件组合。

详细解释

组合是一种更灵活的代码重用方式。React 官方建议使用组合而不是继承来构建组件。

示例

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

*** 本文仅是学习中的记录，有错误请指正。 ***