JavaScript中React 面向组件编程（下）

JavaScript中React的面向组件编程可以帮助开发人员更好地组织和管理代码，提高代码的可维护性和可扩展性。下面是一些实用的攻略来帮助你在React中实现面向组件编程。

1. 组件的分解

在React中，一个组件可以看作是一个可重用的代码块，可以通过组合多个小组件来创建一个大型的应用程序。但是，为了开始开发，必须从分解根组件开始。比如，我们想要创建一个用户信息的应用程序。我们可以先将其分解为以下几个组件：

• UserList：用于列出所有用户的组件。
• UserListItem：用于显示单个用户详情的组件。
• UserForm：用于添加和编辑用户信息的组件。

2. 属性的传递

组件之间可以通过属性来传递数据。在React中，属性是不可变的。这就意味着，一旦属性被传递给组件，组件内部就不会改变。所以，你应该在初始渲染的时候传入所有需要的属性。如果需要更改组件的属性，可以通过重新渲染组件来实现。

下面是一个示例，演示了父组件向子组件传递属性：

import React, { Component } from 'react';
import UserListItem from './UserListItem';

class UserList extends Component {
  state = {
    users: [
      { id: 1, name: 'John Doe', email: '[e-mail]' },
      { id: 2, name: 'Jane Doe', email: '[e-mail]' },
      { id: 3, name: 'Bob Smith', email: '[e-mail]' },
    ],
  };

  render() {
    const { users } = this.state;

    return (
      <ul>
        {users.map(user => (
          <UserListItem key={user.id} user={user} />
        ))}
      </ul>
    );
  }
}

export default UserList;

import React from 'react';

function UserListItem(props) {
  const { user } = props;

  return (
    <li>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </li>
  );
}

export default UserListItem;

在此示例中，UserList组件将用户数组传递给UserListItem组件，UserListItem组件映射每个用户对象并呈现相关详细信息。

3. 事件的处理

在React中，可以通过在组件中设置事件处理程序来处理用户与组件的交互。通常，事件将在组件内部处理，但是，在多个组件之间共享事件处理程序时，将其推送到组件树的一级并将事件处理程序的引用作为属性传递非常有用。

下面是一个示例，展示了如何处理事件并将事件传递到父组件：

import React from 'react';

function UserForm(props) {
  const { onSubmit } = props;

  function handleSubmit(event) {
    event.preventDefault();
    const { name, email } = event.target.elements;
    onSubmit({
      name: name.value,
      email: email.value,
    });
    name.value = '';
    email.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name-input">Name:</label>
      <input id="name-input" type="text" name="name" />
      <label htmlFor="email-input">Email:</label>
      <input id="email-input" type="email" name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserForm;

import React, { Component } from 'react';
import UserForm from './UserForm';

class AddUser extends Component {
  handleAddUser = newUser => {
    const { onAddUser } = this.props;
    onAddUser(newUser);
  };

  render() {
    return (
      <div>
        <h2>Add a new user:</h2>
        <UserForm onSubmit={this.handleAddUser} />
      </div>
    );
  }
}

export default AddUser;

在此示例中，UserForm组件定义了一个handleSubmit事件处理程序，从表单中提取数据并将其传递给onSubmit方法。AddUser组件在定义时传递了此onAddUser方法，可以用于向用户列表中添加新用户。此示例演示了将事件处理程序定义在父组件中，以便从多个姐妹组件共享的好处。

在React中，面向组件编程非常重要，尤其是在大型应用程序中。分解组件、传递属性和处理事件非常重要，因为它使您可以更好地组织代码，并使其更易于维护和可扩展，这样您可以更快地开发出更强大的应用程序。