Facebook 上线的一个用来搭建操作界面的 JavaSc

下面再次进行讲第九节课的具体内容，依照考试大纲里边第九节课里的详尽知识要点，加上详尽的具体内容，包含知识要点详细的讲解和编码事例，最终留两条同步练习。还记得第九节课主题是React。

好一点的，下面就来逐渐解读第九节课的具体内容，主题为React。

React 介绍

React 是 Facebook 上线的一个用来搭建操作界面的 JavaScript 库，他们被设计方案用于搭建大中型、高性能的 Web 应用软件。React 根据组件化的方式去完成界面的搭建，促使开发人员能将网页页面划分成好几个单独的部件，并且对每一个部件开展独立的开发设计、调节和测试，进而提升研发效率。

React 有以下几个最主要的特性：

• 组件化开发：React 根据组件化的开发方式，促使开发人员能将网页页面拆分成好几个单独的部件，提升代码的可扩展性和可重用性。
• 虚似 DOM：React 应用虚似 DOM 技术性，将页面中的每一个部件抽象化成一个虚似 DOM 连接点，并且在部件情况发生变化时，通过比较前后左右2个虚似 DOM 树差别，只是升级必须升级更新的一部分，提升界面的特性。
• 单向数据流：React 完成了单向数据流，即数据信息只有从父部件向子组件流动性，子组件无法直接改动父部件传送来的信息，这类数据流动的形式促使数据库的流动性越来越条理清晰，便捷调节与维护。
• 函数式编程：React 青睐函数式编程的观念，将要应用软件看作是一系列输入输出的函数公式所组成的，促使编码更为简约、模块化设计与可检测。

下面我们还会继续讨论 React 几个关键定义：部件、JSX、状况和 props，如何更好地应用 React 创建一个最基本的部件。

部件

在 React 中，一切都是部件。部件是 React 应用软件的最基本搭建块，根据部件，我们可以将操作界面划分成小一点、可重复使用的那一部分。

部件能够是类部件或函数组件。类部件是 ES6 类，务必传承 React.Component，而且需要完成 render 方式。函数公式部件是接纳 props 并回到 React 元素函数公式。

在模块中，能够界定 state 和 props。props 是无法变得，他们是以父部件传达给子组件的。state 是可调的，用以在模块内部结构储存和同步数据。

以下是一个简单的函数公式部件实例：

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

JSX

JSX 是一种词法拓展，容许大家在 JavaScript 编码中撰写相近 HTML 的代码。在 JSX 中，我们可以将 HTML 标识和 React 部件组合在一起，以搭建操作界面。

JSX 关系式务必包含于花括号 {} 中。在 JSX 中，我们可以使用 JavaScript 中的任何关系式。

以下是一个简单的 JSX 实例：

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

状况和 Props

状况和 Props 是 React 元件的2个关键定义。情况用以储存部件内部数据信息，并且在部件生命期中进行更新。Props 是以父部件传达给子组件的特性，它们都是不能变得。

情况可以用 setState 方式进行更新。当状态更新时，React 将重新3D渲染部件。

以下是一个简单的状况和 Props 实例：

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Mary" };
  }

  render() {
    return <h1>Hello, {this.props.title} {this.state.name}!</h1>;
  }
}

创建一个最基本的部件

下面，我们将要应用 React 建立一个简单的部件。我们将要创建一个含有电子计数器的按键。每一次点击按键时，电子计数器都会增加。

最先，大家需要安装 React：

npm install react react-dom

随后，我们能建立一个名为 Button 的部件：

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((state) => ({ count: state.count   1 }));
  };

  render() {
    const { count } = this.state;
    const { label } = this.props;

    return (
      <button onClick={this.handleClick}>
        {label} clicked: {count} times
      </button>
    );
  }
}

在这样一个部件中，大家用了类部件和心态。大家在 constructor 方式中复位了情况目标，用于保存按钮被点一下次数。在 handleClick 方式中，大家用了 setState 方式来升级情况目标，与此同时开启再次3D渲染部件。在 render 方式中，大家载入情况对象和 props，依据这些来3D渲染出按键的标签和标注的文字。

总体来说，React 使用了组件化的编程模型，开发人员能将全部运用拆分为好几个小一点部件，以简单化运用的复杂性和提升可扩展性。根据状况和属性操纵，React 让部件具有可组合性和可复用性，开发人员只需要考虑部件自已的完成，而不需要担心全部运用的多元性。

具体内容有点儿少，再次讨论 React 更深层次的特征和应用领域。

除此之外，React 还有很多其他的特点和应用领域。以下属于一些常见的：

• 部件生命期：React 部件有生命期，能通过这种生命期钩子函数去执行不一样的操作。比较常见的生命周期函数有 componentDidMount、componentDidUpdate 和 componentWillUnmount，先后在部件被初始化、更新和卸载掉时实行。
• 部件通讯：在 React 中，部件中间能通过 props 和 state 去进行通讯。父部件能通过 props 将数据传递给子组件，子组件能通过调用函数将数据传递回父部件。必要时在一般父子俩部件之间通讯，能够使用一些第三方库，如 Redux 或 React Context。
• 高阶组件：高阶组件是一个函数公式，它接纳一个部件做为主要参数并回到一个新的部件。高阶组件可用于提高元件的作用，例如加上共通的逻辑或款式。
• 服务端渲染：React 还可以在服务器端开展3D渲染，这可以提升初次加载页面速度，同时还可以使百度搜索引擎更方便地检索页面内容。
• 应用程序开发：React Native 是一个根据 React 的框架，可用于开发设计移动智能终端。应用 React Native，能用 JavaScript 来开发 iOS 和 Android 运用，以实现原生应用性能和感受。

此外，React 还有很多其他的特点和应用领域。灵活运用 React，能够帮助开发者迅速、更高效地搭建当代 Web 运用和移动智能终端。

再说一下React Hooks吧

React Hooks

React Hooks是React 16.8版本号发布的一项新特性，它促使函数公式部件也能够拥有类元件的状况和生命期等特点。应用Hooks能让函数公式部件更加高效和便于重复使用。

常见的React Hooks包含useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef这些。这种Hooks可用于完成状态管理、不良反应解决、事故处理、性能调优等服务。

比如，useState Hook可用于在函数公式部件中加入情况。它接纳一个初值，并回到一个二维数组，在其中第一个元素是现阶段状态值，第二个原素是升级状态值的函数公式。比如：

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>
        Click me
      </button>
    </div>
  );
}

这一模块中用了useState Hook来添加一个电子计数器状态，当客户点击图标时，升级电子计数器数值。

另一个常见的Hook是useEffect。它可以让大家在函数公式部件中实行不良反应实际操作，比如从服务器读取数据、定阅事情等。useEffect的第一个主要参数是一个调用函数，用于实行不良反应实际操作，第二个主要参数是一个二维数组，用于特定什么自变量变化时必须重新执行不良反应实际操作。比如：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在部件初始化和每一次升级的时候都会实行这一函数公式
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅仅在count变化时才能实行不良反应实际操作

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>
        Click me
      </button>
    </div>
  );
}

这一模块中用了useEffect Hook来在每一次升级时更新界面的文章标题，第二个主要参数是一个二维数组，特定只会在count变化时才能重新执行不良反应实际操作。

React Hooks是React的一个重要特点，它能够也让我们容易地在函数公式部件中使用情况和不良反应实际操作等服务。灵活运用React Hooks能够让我们写下更为雅致、灵便、便于维护保养的代码。

以下是两条课后习题：

1. 创建一个 React 运用，实现一个可以添加和删掉待办事宜的应用。该运用一般包括一个表格文本框和一个待办事宜目录，用户可以在文本框中输入待办事宜并通过提交按钮导入到页面上，还可以在页面上删掉已添加的待办事宜。需要使用 React 的状况和生命周期函数来达到。
2. 在一个 React 运用中，应用 Context 来达到一个主题转换作用。该运用一般包括一个主题切换按钮，点击图标后能将运用活动的主题转换为黑色或乳白色。需要使用 React Context 来达到主题风格转换的全局状态。