React入门

Download reactjs eBook

备注

React是一个声明性的,基于组件的JavaScript库,用于创建用户界面。

为了实现像React中的功能一样的MVC框架,开发人员将其与选择的Flux风格结合使用,例如Redux

版本

发布日期
0.3.0 2013年5月29日
0.4.0 2013年7月17日
0.5.0 2013年10月16日
0.8.0 二零一三年十二月十九日
0.9.0 2014年2月20日
0.10.0 2014年3月21日
0.11.0 2014年7月17日
0.12.0 2014年10月28日
0.13.0 2015年3月10日
0.14.0 2015年10月7日
15.0.0 2016年4月7日
15.1.0 二零一六年五月二十零日
15.2.0 2016年7月1日
15.2.1 2016年7月8日
15.3.0 2016年7月29日
15.3.1 2016年8月19日
15.3.2 2016年9月19日
15.4.0 2016年11月16日
15.4.1 2016年11月23日
15.4.2 2017年1月6日
15.5.0 2017年4月7日
15.6.0 2017年6月13日

什么是ReactJS?

ReactJS是一个基于组件的开源前端库,仅负责应用程序的视图层 。它由Facebook维护。

ReactJS使用基于虚拟DOM的机制来填充HTML DOM中的数据(视图)。虚拟DOM快速工作,因为它只更改单个DOM元素,而不是每次都重新加载完整的DOM

React应用程序由多个组件组成 ,每个组件负责输出一小块可重用的HTML。组件可以嵌套在其他组件中,以允许使用简单的构建块构建复杂的应用程序。组件还可以维护内部状态 - 例如,TabList组件可以存储对应于当前打开的选项卡的变量。

React允许我们使用名为JSX的特定于域的语言编写组件。 JSX允许我们使用HTML编写组件,同时混合使用JavaScript事件。 React将在内部将其转换为虚拟DOM,并最终为我们输出HTML。

反应在组件“ 做出反应 ”国家快速变化,并自动利用虚拟DOM重新呈现在HTML DOM的组件。虚拟DOM是实际DOM的内存中表示。通过在虚拟DOM内部进行大部分处理而不是直接在浏览器的DOM中进行处理,React可以快速行动,只添加,更新和删除自上次渲染周期发生以来已更改的组件。

创建可重用组件的绝对基础知识

组件和道具

由于React仅关注应用程序的视图,因此React中的大部分开发都将是组件的创建。组件表示应用程序视图的一部分。 “Props”只是JSX节点上使用的属性(例如<SomeComponent someProp="some prop's value" /> ),是我们的应用程序与组件交互的主要方式。在上面的代码片段中,在SomeComponent内部,我们可以访问this.props ,其值将是对象{someProp: "some prop's value"}

将React组件视为简单函数可能很有用 - 它们以“props”的形式获取输入,并将输出生成为标记。许多简单的组件更进一步,使自己成为“纯函数”,这意味着它们不会产生副作用,并且是幂等的(给定一组输入,组件将始终产生相同的输出)。通过实际创建组件作为函数而不是“类”,可以正式实现此目标。有三种方法可以创建React组件:

  • 功能(“无状态”)组件
const FirstComponent = props => (
    <div>{props.content}</div>
);
 
  • React.createClass()
const FirstComponent = props => (
    <div>{props.content}</div>
);
 
  • ES2015课程
const FirstComponent = props => (
    <div>{props.content}</div>
);
 

这些组件的使用方式完全相同:

const FirstComponent = props => (
    <div>{props.content}</div>
);
 

上面的例子都会产生相同的标记。

功能组件不能在其中具有“状态”。因此,如果您的组件需要具有状态,那么请选择基于类的组件。有关更多信息,请参阅创建组件

作为最后一点,反应道具一旦被传入就是不可变的,这意味着它们不能在组件内进行修改。如果组件的父级更改了prop的值,则React处理用new替换旧的props,组件将使用新值重新渲染自身。

请参阅反思可重用组件中的 思考,以深入了解道具与组件的关系。

创建React App

create-react-app是由Facebook创建的React应用程序样板生成器。它提供了一个易于使用且配置最少的开发环境,包括:

  • ES6和JSX转换
  • 具有热模块重新加载的开发服务器
  • 代码linting
  • CSS自动添加前缀
  • 使用JS,CSS和图像捆绑以及源映射构建脚本
  • Jest测试框架

安装

首先,使用节点包管理器(npm)全局安装create-react-app。

npm install -g create-react-app
 

然后在您选择的目录中运行生成器。

npm install -g create-react-app
 

导航到新创建的目录并运行启动脚本。

npm install -g create-react-app
 

组态

默认情况下,create-react-app是故意不可配置的。如果需要非默认使用,例如,要使用编译的CSS语言(如Sass),则可以使用eject命令。

npm install -g create-react-app
 

这允许编辑所有配置文件。注意,这是一个不可逆转的过程。

备择方案

替代React锅炉板包括:

构建React应用程序

要为生产准备好构建应用程序,请运行以下命令

npm install -g create-react-app
 

你好,世界

没有JSX

这是一个使用React的主API来创建React元素的基本示例,以及用于在浏览器中呈现React元素的React DOM API。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>
 

使用JSX

不是从字符串创建React元素,而是可以使用JSX(由Facebook创建的Javascript扩展,用于向JavaScript添加XML语法),这允许编写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>
 

作为等价物(对于熟悉HTML的人来说更容易阅读)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>
 

包含JSX的代码需要包含在<script type="text/babel"> 标记中。此标记中的所有内容都将使用Babel库转换为纯Javascript(除了React库之外还需要包含它)。

所以最后上面的例子变成:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>
 

Hello World Component

React组件可以定义为扩展基础React.Component 类的ES6类。在其最小形式中,组件必须定义一个render 方法,该方法指定组件如何呈现给DOM。 render 方法返回React节点,可以使用JSX语法将其定义为类似HTML的标记。以下示例显示如何定义最小组件:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld
 

组件也可以接收props 。这些是由其父级传递的属性,以指定组件本身无法知道的某些值;属性还可以包含在某些事件发生后可以由组件调用的函数 - 例如,按钮可以为其onClick 属性接收函数,并在单击它时调用它。编写组件时,可以通过Component本身上的props 对象访问其props

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld
 

上面的示例显示了组件如何呈现由其父级传递给name prop的任意字符串。请注意,组件无法修改它接收的道具。

组件可以在任何其他组件中呈现,或者如果它是最顶层组件则直接呈现在DOM中,使用ReactDOM.render 并为其提供组件和DOM节点,您希望在其中呈现React树:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld
 

到现在为止,您知道如何制作基本组件并接受props 。让我们更进一步,介绍state

为了演示,让我们制作我们的Hello World应用程序,如果给出了全名,则只显示第一个名称。

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld
 

注意:每个组件都可以拥有自己的状态,或者接受父组件作为道具的状态。

Codepen链接到示例。

具有无状态功能的Hello World

无状态组件从功能编程中获得了他们的理念。这意味着:一个函数在给定的内容上完全返回相同的东西。

例如:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;
 

从上面的例子可以看出,statelessSum总是会返回给定a和b的相同值。但是,即使没有参数,statefulSum函数也不会返回相同的值。这种类型的函数的行为也称为副作用 。因为,该组件会影响某些事物。

因此,建议更频繁地使用无状态组件,因为它们没有副作用,并且总是会创建相同的行为。这就是您希望在应用程序中使用的内容,因为波动状态是可维护程序的最坏情况。

最基本的反应组分类型是没有状态的反应组分。 React组件是其道具的纯函数,不需要任何内部状态管理,可以编写为简单的JavaScript函数。据说它们是Stateless Functional Components 因为它们只是props 的功能,没有任何state 可以跟踪。

这是一个简单的例子来说明Stateless Functional Component 的概念:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;
 

请注意,此组件执行的所有操作都将呈现包含name prop的h1 元素。此组件不跟踪任何状态。这是一个ES6示例:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;
 

由于这些组件不需要后台实例来管理状态,因此React有更多优化空间。实现是干净的,但到目前为止还没有实现对无状态组件的这种优化

安装或设置

ReactJS是一个包含在单个文件react-<version>.js 中的JavaScript库,可以包含在任何HTML页面中。人们通常也会安装React DOM库react-dom-<version>.js 以及主要的React文件:

基本包容

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>
 

要获取JavaScript文件,请转到官方React文档的安装页面

React还支持JSX语法 。 JSX是由Facebook创建的扩展,它为JavaScript添加了XML语法。为了使用JSX,您需要包含Babel库并将<script type="text/javascript"> 更改为<script type="text/babel"> ,以便将JSX转换为Javascript代码。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>
 

通过npm安装

您还可以通过执行以下操作使用npm安装React:

npm install --save react react-dom

要在JavaScript项目中使用React,您可以执行以下操作:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>
 

通过纱线安装

Facebook发布了自己的名为Yarn的包管理器,它也可用于安装React。安装Yarn后,您只需运行此命令:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>
 

然后,您可以在项目中使用React,方法与通过npm安装React的方式完全相同。

Stats

2231 Contributors: 46
Monday, August 7, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书