React 教程：疾速上手指南

2019年8月31日 202次阅读 来源: 疯狂的技术宅

翻译：猖獗的手艺宅

原文：
https://www.toptal.com/react/…

本文首发微信民众号：jingchengyideng
迎接关注，天天都给你推送新颖的前端手艺文章

前端和 JavaScript 是一个新鲜的天下。大批不停推出的新手艺的同时，也在被不须要它们的人讪笑，每每很多人都邑如许做。我们偶然会对不停涌现的信息、库和议论觉得手足无措，总愿望能有一些稳固的东西，就像能让我们可以休整一段时候的避风港。近来 React 好像有变成 JavaScript 演化海洋中暖和港湾的趋向。

恰是考虑到这一点，我们决议制造这个 React 系列教程，展现它的功用，并看看它与 Angular 和 VueJS 比拟有什么特征。

《React 教程：疾速上手指南》

固然 React 并非唯一的挑选，但如今它是最受迎接、最稳固、最具有立异性的处理方案之一，虽然它依然在不停晋级，但更多的是在革新，而不是增添功用。

2019年的 React

React 是一个视图库，可以一向追溯到2011年，当时它的第一个原型名为 FaxJs，并出如今 Facebook 上，React 是由 Jordan Walke（他也是上述原型的作者）于2013年5月29日在 JSConfUS 推出的，并于2013年7月2日在 GitHub 上公然宣布。

在2014年，当最先扩大社区并推行 React 时，它遭到延续迎接。然则从我的角度来看，2015年是大型公司（比方 Airbnb 和 Netflix ）最先喜好并采纳 React 的里程碑年。别的，昔时还涌现了React Native。 React Native背地的主意并非什么全新的东西，不过看起来很风趣，特别是由于它获得了 Facebook 的支撑。

另一个严重变化是 Redux，一个 Flux 完成。这使状况治理体式格局越发简朴友爱，使其成为迄今为止最胜利的完成。

从其涌现一向到如今，另有很多其他的东西供我们运用，包括 React tools，重写了中心算法；Fiber 用于语义转换版本掌握等等。到了本日，我们处于 v16.6.3，几周后可以就会宣布支撑 Hooks 的新版本（它应当在 16.7.0 获得支撑，但由于对 React.lazy 做了一些修复，就先宣布了一个版本）。React 由于其名望和稳固性获得了普遍好评。

但 React 究竟是什么？

好吧，如果你身为前端开辟人员然则历来都没有听说过，那末我就要说声“祝贺你”，由于这是一个了不得的豪举。

开个打趣罢了。React 是一个声明式的基于组件的视图库，可以协助你构建 UI。它是一个库而不是一个框架，虽然最初很多人把它形貌为后者。

明显，如果我们要把 Redux 和 React Router 等增加到 React，它就具有了制造通例单页运用顺序所需的一切东西，这可以这就是它偶然被毛病地形貌为框架而不是库的缘由 。如果一定要如许以为的话，将该环境的一切组件放在一同，术语“框架”可以有点合适它，但就其本身而言，React 仅仅是一个库。

不要再纠结改如何对其分类了，先关注 React 有什么奇特的处所，一些之前没有注重到的东西。起首，当你第一次看到 React 时，就会想到 JSX，由于这是你看到代码时的第一个感觉。 JSX是一种 JavaScript 语法扩大，有点相似于 HTML/XML。说到 React 和 JSX，它们与 HTML 有一些区分，比方，React 中的类是 className，没有tabindex 然则有 tabIndex，款式接收具有驼峰定名的属性的 JavaScript 对象，依此类推。

有一些纤细的差异，然则任何人都应当马上接收它们。事宜处置惩罚是经由历程比方 onChange 和 onClick 属性完成的，这些属性可以用来附加一些函数来处置惩罚事宜。别的，今后的组件可以经由历程运用 props 自在重用和自定义，因而没有来由屡次编写雷同的代码。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello World, {this.props.name}</div>
        );
    }
}

然则实际上 JSX 在 React 中并非异常必要的。你可以编写通例函数来建立元素，而无需运用JSX。上面的代码可以像下面如许去用。

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return React.createElement(
            'div',
            null,
            'Hello World, ',
            this.props.name
        );
    }
}

很明显我并非发起你用如许的语法，只管有些状况下它有可以会派上用场（比方你想要引入一个异常小的东西然则又不想变动构建环境）。

实际上我展现上述代码另有另一个缘由。一般，开辟人员不明白我们为何须要实行以下操纵：

import React from 'react';

代码片断应当是可以自诠释的。纵然我们正在提取 Component，依然须要 React，由于 Babel 在 JSX 之上转换为 React.createElement。所以如果我们不导入 React 就会失效。前面我提到了 Babel，这是一个东西，可以协助我们预览那些尚未在 JavaScript 中（更确实地说是在浏览器中）支撑的东西，或许以某种体式格局对 JavaScript 举行扩大（或许相似于 TypeScript，Babel 从 Babel 7 最先支撑的差别言语）。谢谢Babel：

  • JSX 将被转化为成浏览器可以明白的代码。

    • 我们可以运用尚未在浏览器中完成的新功用（比方类属性）。
    • 我们可以支撑新浏览器中的特征，同时在旧浏览器中支撑较旧的功用。

简而言之，在 JavaScript 中，就是本日的代码来日诰日依然能用；这可以须要为此特地再写一篇文章。值得一提的是，React 的导入也可以被一些其他手艺绕过（比方经由历程 Webpack 引入 ProvidePlugin 等），然则由于篇幅有限，我们将防止运用这类体式格局，并假定用户将运用 Create React App（ CRA）（稍后将提到有关此东西的更多信息）。

另一点比 JSX 本身更重要，那就是 React 基于假造 DOM。简而言之，假造 DOM 是用 JavaScript 编写的在内存中的抱负树构造，稍后我们会把它与实在 DOM 举行比较。

如何与 Angular 和 Vue 举行比较？

我很不喜好对库举行比较，特别是当我们被迫把梨和苹果放在一同举行比较时。

因而，我将尝试运用一系列简短的题目和答案将 React 与 Angular 和 Vue 举行比较。这类比较与手艺相干，而不是主观的作出 “X比Y更好，由于它运用 JSX 而不是模板。” 这类出于个人偏好的对照。别的在速率和内存分派等方面 React 与其重要竞争对手（Angular 和 Vue 都能想获得）异常相似，有一篇关于这个题目的文章很不错，但请记着这一点：绝大多数顺序并不会做这类处置惩罚上万行数据的事。因而，这些结果也是地道的速率试验。实际上你也不会把这放在首位。

《React 教程：疾速上手指南》

那末让我们来看看关于 React 的题目以及它与竞争对手的比较：

我想具有更多的事情时机。 React 究竟有多受迎接？

嗯，这很轻易回复 —— 挑选 React。实际上，我会说 React 的事情时机约莫别的的 6 到 10 倍（可以相差比较大，在一些大网站是 50 倍，也有些网站是 6 倍），是 Vue 的 2 到 4倍，比 Angular 更多。对 React experts 的需求很大，然则为何 Vue 在 GitHub 上异常受迎接（实际上它获得了比 React 更多的star）却没有更多的职位空白？这点我不知道。【译者注：作者是美国人，这里指的是美国的就业市场】

我想要一个很大的社区，另有大批的库，可以疾速处理可以涌现的题目。
选 React，不要再犹疑了。

它是不是轻易运用，开辟历程是不是使人兴奋？

2018年和2017年的 JS 状况报告显现，React 和 Vue 都享有优越的荣誉，大多数开辟人员示意会再次运用。另一方面Angular 有一种趋向，每一年都邑有越来越多的人说不会再次运用它。

我想建立一个新的单面运用，但我不想分外去找这类支撑库。

我以为这大概是 Angular 值得挑选的唯一缘由。

我不是大公司。然则愿望尽量自力，应当挑选哪一个？

Vue —— 它是我们三巨头中唯一自力的一个。 （ Facebook 支撑 React，而 Google 支撑 Angular。）

上手最简朴和最快的学习曲线？

Vue/React。在这里我更倾向于 Vue，但这只是我个人的看法。至于为何？由于你不须要懂 JSX（它是可选的），它基本上只是 HTML + CSS + JavaScript。

React Tutorial：最先你的第一个顺序

《React 教程：疾速上手指南》

如今上手 React 最简朴要领是运用 CRA，这是一个为你建立项目的 CLI 东西，可协助你防止设置 Webpack / Babel 等环境。你只须要依靠默的认设置体式格局，并跟着时候的推移更新包括在内的内容。多亏了这一点，你无需体贴某些症结库的重要更新。

固然，稍后，你可以经由历程运转 npm run eject 来“弹出”本身并本身处置惩罚每一个细节。这类要领有其本身的长处，由于你可以增添本来不可用的东西（比方装潢器）来加强你的运用，但它也多是使人头疼的题目，由于它须要消费更多的时候去设置很多分外的文件。

所以，起首要做的是：

npx create-react-app {app-name}

然后 npm run start 就完成了。

类组件与函数组件

我们应当先诠释这些组件的差别的处所。基本上每一个组件可所以 function 或 class。它们之间的重要区分在于，类组件有函数组件中没有的一些功用：它们有 state 并运用 refs、生命周期等。从 v16.7 最先我们可以运用 hooks，因而可以运用 hooks 来举行 state 和 refs。

类组件有两种范例：Component 和 PureComponent。它们唯一的区分是 PureComponent 可以对 props 和 state 举行浅层比较 —— 这在你不想“糟蹋”衬着资本的状况下有独到的优点，一个组件及其子组件恰幸亏衬着后处于雷同状况。不过它只要一个浅层比较；如果你想完成本身的比较操纵（如果你通报的是庞杂的 props），只须要用 Component 并掩盖 shouldComponentUpdate（默许状况下返回true）。从 16.6 + 最先，在函数组件中也可以用相似的东西 —— 端赖 React.memo 这个更高阶的组件，在默许状况下表现得像 PureComponent（浅层比较），在你举行自定义的 props 比较时它还须要第二个参数。

一般来说如果你能用函数组件（假定你不须要类功用）那末就用它。不过从 16.7.0 最先，由于生命周期要领，只能用类组件。然则我以为函数组件更通明，更轻易推理和明白。

React 生命周期要领

《React 教程：疾速上手指南》

Constructor(props)

  • 可选，CRA 使其变得受迎接，默许包括 JavaScript 的类字段声明。声明是不是经由历程类中的箭头函数去绑定要领是没有意义的。相似的状况也可以初始化为类属性。

    • 仅用于 ES6 类中初始化对象的当地状况和绑定要领。

componentDidMount()

  • 在这里举行 Ajax 挪用。
  • 如果你须要事宜监听器，定阅等功用，可以在此处增加。
  • 你可以在这里运用 setState（然则它会使组件从新衬着）。

componentWillUnmount()

  • 消灭一切仍在举行的东西 —— 比方，Ajax应当被中缀，作废定阅，消灭定时器等等。
  • 不要挪用 setState，由于它没有意义，由于组件将会被卸载（而且你会获得一个正告）。

componentDidUpdate(prevProps, prevState, snapshot)

  • 在组件方才更新终了时实行（在最先衬着时不会）。
  • 有三个可选的参数（之前的props，之前的 state 和只要在你的组件完成 getSnapshotBeforeUpdate 时才会涌现的快照 ）。
  • 仅当 shouldComponentUpdate 返回true时才会实行。

  • If you use setState here, you should guard it or you will land in an infinite loop.

    • 如果你在这里用到了 setState，应当庇护它，不然将会堕入无穷轮回。

shouldComponentUpdate(nextProps, nextState)

  • 仅用于机能优化。

  • 如果返回 false，则不会挪用衬着器。

    • 如果重写的 SCO 只是对 props/state的浅层比较，可以运用 PureComponent。

getSnapshotBeforeUpdate()

  • 可用于保留一些与当前 DOM 有关的信息，比方当前的转动位置，稍后可在 componentDidUpdate 中重用，用来恢复转动的位置。

componentDidCatch(error, info)

  • 应当纪录日记毛病的处所。
  • 可以挪用 setState，但在今后的版本中，将会在静态要领getDerivedStateFromError(error) 中被删除，它将经由历程返回一个值来更新状况。

另有两种静态要领，在其他的段落中提到过

static getDerivedStateFromError(error)

    • 此处供应毛病信息。
    • 应返回一个对象值，该值将会更新可用于处置惩罚毛病的状况（经由历程显现内容）。
    • 由于它是静态的，因而无法访问组件实例本身。

    static getSnapshotBeforeUpdate(props, state)

    • 应当在 props 随时候变化的状况下运用 —— 比方依据 React docs，它可以用于转换组件。
    • 由于它是静态的，因而无法访问组件实例本身。

    注重，如今另有更多可用的要领，但它们可以会在 React 17.0 中被删除，所以就不在这里没有提起了。

    State vs. Props

    我们先从 Props 最先，由于它更轻易诠释。Props 是传给组件的属性，今后可以在组件显现信息或营业逻辑时重用它 。

    import React, { Component } from 'react';

export default class App extends Component {
   render() {

       return (
           <div>
               <HelloWorld name="Someone :)"/>
           </div>
       );
   }
}

const HelloWorld = (props) => <div>Hello {props.name}</div>

    在上面的例子中，name 是一个 prop。prop 是只读元素，不能直接在子组件中变动。很多人有一种不太好的习气，那就是把 prop 复制到 state ，然后再对 state 举行操纵。固然偶然候你愿望实行相似 “在提交以后去更新父组件的初始状况” 如许的操纵，但这类状况异常少见 —— 在这类状况下，更新初始状况可以有意义。别的不仅可以给子组件通报字符串如许的 prop ，还可以通报数字、对象、函数等。

    prop 另有一个更有效的东西叫做 defaultProps，这是一个静态字段，它可以通知你组件的默许 prop 是什么（比方当它们没有通报给组件时）。

    在“状况提拔”的状况下，个中一个组件（父组件）具有稍后由其子组件重用的状况（比方，一个子组件用来显现而另一个用来编辑），那末我们须要将该功用从父组件通报给子组件。 它许可我们更新父级的当地状况。
    另一方面，状况是一个可以修正的当地状况，然则经由历程 this.setState 间接修正。如果直接去转变状况，组件将不会感知到，更不会由于状况的转变而从新衬着。

    SetState 是一种变动当地状况对象的要领（经由历程实行浅层兼并），以后组件经由历程从新衬着本身来相应它。请注重，在运用 setState 以后，this.state 属性不会马上对变动（它具有异步性子）作出反应，由于优化的缘由，可以会将 setState 的几个实例一同举行批处置惩罚。挪用它的体式格局有好几种，个中一种体式格局许可我们在对状况举行更新可以后马上对组件实行某些操纵：

    • setState({value: ‘5’})

      • setState((state, props) => ({value: state.name + “‘s”}))
    • setState([object / function like above], () => {}) —— 这个表单许可我们附加 callback，当 state 显现我们想要的数据时被挪用（在第一个参数）。
    import React, { Component } from 'react';

export default class App extends Component {
   state = {
       name: 'Someone :)'
   }

   onClick = () => this.setState({ name: 'You' })

   render() {
       return (
           <div>
               <HelloWorld name={this.state.name} onClick={this.onClick}/>
           </div>
       );
   }
}

const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

    React Context

    React 近来稳固的 Context API（已经在 React 中存在了相称长的时候，只管被 Redux 等一些最受迎接的库普遍运用，倒是一个试验性功用）有助于我们处理一个题目：Props drilling。简而言之 Props drilling 是在构造中深切通报 props 的一种体式格局 —— 比方，它可所以组件的某种主题、针对特定言语的当地化、用户信息等。在 Context涌现之前（或许更确实地说，在它变成非试验功用之前），它是经由历程递归体式格局从父级一向通报到到子级的末了一级的来举行钻取的（明显另有可以处理这个题目的 Redux）。请注重，此功用仅仅用于处理 Props drilling 的题目，而且不能替换 Redux 或 Mobx 等。固然如果你只运用状况治理库，则可以随便替把它替换掉。

    总结

    这是我们的React教程的第一部份。在后续的文章中，我们会设想更多高等主题，包括款式和范例搜检，以及临盆布置和机能优化。

    迎接继承阅读本专栏别的高赞文章：

    本文首发微信民众号：jingchengyideng

    迎接扫描二维码关注民众号，天天都给你推送新颖的前端手艺文章

    《React 教程：疾速上手指南》

        原文作者：疯狂的技术宅
        原文地址: https://segmentfault.com/a/1190000018305735
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞