React高级技术与集成（翻译）

原文链接：blog.arjunsingh.tech/superchargi…

原文作者：hashnode.com/@dotarjun

写在前面

之所以决定翻译下面这篇文章，算是学英语的过程中发现的，感觉文章很简洁、通俗易懂，言语精炼、所以在翻译的时候在表达作者的意思的同时，也尽可能的保持了作者精炼简洁的风格。

当时还评论了作者、机缘巧合之下作者竟然reply了，受宠若惊。综合以上所以决定翻译此文章；这是一个系列文章，本章节是系列文章的第三章节。

---

下面贴出当时给文章的评论以此纪念：

简介

欢迎来到react系列文章（4章节）， 在react系列文章之第一章节、我们探索了在web开发方面为什么react是更受喜爱的框架；接着在react系列文章之第二章节，我们深入到components、state以及props的核心概念。

现在，在第三章节，通过探索react的高级的技术与集成，将我们的react技巧进一步提升；下面我们讨论的主题包括：“事件处理、表单操作、外部库的集成“， 接下来准备好加强你的react技巧、解锁更多可能性。

react中的事件处理

react提供一种简单直观的事件处理方式去处理用户交互，下面是在react组件中如何处理事件：

• 在函数组件中处理事件：

import React from 'react';

function Button() {
  const handleClick = () => {
    console.log('Button clicked!');
  };
  return <button onClick={handleClick}>Click Me</button>;
}

export default Button;

• 在类组件中处理事件：

import React, { Component } from 'react';

class Input extends Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

export default Input;

react中的表单操作

在众多web应用中，form表单扮演着必不可少的角色，react是通过管理表单的状态、以及提供方便快捷的事件处理器来简化了表单处理，下面是一些例子：

• 受控组件：受控组件中，react托管了状态绑定到表单组件上，而无需用户通过额外的事件进行赋值状态

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

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

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.username, this.state.password);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleChange}
        />
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default LoginForm;

• 非受控组件：表单的状态变化需要开发人员手动维护，如下代码中，input表单上的绑定值input变量需要开发人员手写箭头函数进行状态赋值

import React, { Component } from 'react';

class SearchBar extends Component {
  handleSubmit(event) {
    event.preventDefault();
    console.log(this.input.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={input => (this.input = input)} />
        <button type="submit">Search</button>
      </form>
    );
  }
}

export default SearchBar;

在react中集成外部库

react的灵活性允许我们无缝的集成外部库并使用外部库的功能，下面是一个关于在react中集成外部库的简短说明：

1. 安装外部库：

npm install library-name

1. 导入并使用外部库

import React, { Component } from 'react';
import LibraryComponent from 'library-name';

class MyApp extends Component {
  render() {
    return (
      <div>
        <h1>My App</h1>
        <LibraryComponent />
      </div>
    );
  }
}

export default MyApp;

react深入研究资料

如果想进一步扩展你的react知识和探索高级技术与集成，可以看看下面的资源：

• react事件：这个是react官方的事件处理文档链接，里面提供详细的解释和事件处理demo

• react表单：这个是react官方的react官方的表单文档链接，里面涵盖表单处理、包括受控组件和非受控组件

• react集成外部库：从这个链接进去可以学习如何集成外部库、比如集成：D3.js或者Redux在你的react应用里

总结

在我们react系列的第三章节，我们探索了React高级技术，包括事件处理、表单管理、外部库的集成。掌握这些技术，你可以创造更具交互性和更加强大的应用

持续关注我们的react系列后续章节、我们将深入到最好的练习、技术优化、以及进一步提升react技巧的工具；如果你有任何具体的问题或者你想让我们在后续章节中讨论的主题，请尽情分享你的问题或者想法、enjoy coding, enjoy life~