鹅厂优文 | ReactJS一点通

时间 2019-11-05

标签 reactjs 一点 1点繁體版

原文原文链接

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~javascript

本文由鹅厂新鲜事儿发表于云+社区专栏

做者：卢文喆腾讯云 UI工程师html

导语 | 当React 刚开始红的时候，一直以为 JSX 的设计思想极其独特，属于革命性的创新，它性能出众，代码逻辑却很是简单，因此，受到不少开发者的关注和使用，认为它多是未来 Web 开发的主流工具。

React 最先起源于 Facebook 的一个内部项目，由于公司对现有的 JavaScript MVC 框架都不满意，就决定本身开发一套，用来架设 Instagram 的网站。开发完成后，发现这套东西很好用，就在2013年5月开源了。前端

那么 React 优点在哪里呢？java

首先：虚拟 DOM，在 DOM 树的状态须要发生变化时，虚拟 DOM 机制会将同一Event loop先后的 DOM树进行对比，若是两个 DOM 树存在不同的地方，那么 React 仅仅会针对这些不同的区域来进行响应的 DOM 修改，从而实现最高效的 DOM 操做和渲染。 react

好比，咱们修改了 DOM 树上一些节点或 UI 组件对应绑定的 state，React 会即刻将其标记为“脏状态”，在一个 Event loop 结束时，React 会计算得出 DOM 树上须要修改的地方及其最终的状态，并仅仅针对这些地方进行一次性的从新渲染。webpack

因而好处显而易见，并不是每修改一次组件的 state，就会从新渲染一次，而是在 Event loop 结束后作一次计算，减小冗余的 DOM 操做。另外 React 只针对须要修改的地方来作新的渲染，而非从新渲染整个 DOM 树，天然效率很高。git

其次：组件可嵌套，并且，能够模版化 —— 其实在 React 里说起的“组件”，常规是一些可封装起来、复用的 UI 模块，能够理解为“带有细粒度UI功能的部分DOM区域”。而后咱们能够把这些组件层层嵌套起来使用，固然这样组件间会存在依赖关系。github

至于模块化，相似于 ejs 那样能够做为独立的模块被引用到页面上来复用，它能够直接把 UI 组件看成脚本模块那样来使用，彻底能够配合 CommonJS、AMD、CMD 等规范来 require 须要的组件模块，并处理好它们的依赖关系。web

基于上述的两点，React 很天然的就得到一部分开发者的青睐。不过在这以前得先理清两件事情：ajax

1. React 是一个纯 View 层，不擅长于和动态数据打交道，所以它不一样于，也替代不了常规的框架；

2. React 很擅长于处理组件化的页面，在页面上搭组件的形式有点像搭积木同样，所以用上React的项目需求常规为界面组件化。

简单点说，React组件应该具备以下特征：

（1）可组合（Composeable）：一个组件易于和其它组件一块儿使用，或者嵌套在另外一个组件内部。若是一个组件内部建立了另外一个组件，那么说父组件拥有它建立的子组件，经过这个特性，一个复杂的UI能够拆分红多个简单的 UI 组件；

（2）可重用（Reusable）：每一个组件都是具备独立功能的，它能够被使用在多个UI场景；

（3）可维护（Maintainable）：每一个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

组件化一直是网页开发的利器，许多开发者最但愿可以最大程度的重复使用过去的开发的组件，避免重复造轮子。在 React 中组件就是一切，前端开发可能须要花点时间转变思惟，尤为过去咱们每每习惯将 HTML 、CSS 和 JavaScript 分离，如今却要把它们都封装在一块儿。

如下是通常 React Component 书写的主要两种方式：

1.使用 ES6 的 Class

//  注意组件首字母须要大写
class MyComponent extends React.Component {
    // render 是 Class based 元件惟一必須的方法（method）
    render() {
        return (
            <div>Hello, World!</div>
        );
    }
}

// 將 <MyComponent /> 组件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

2.使用 Functional Component 写法

// 使用 arrow function 来设计 Functional Component 让 UI 设计更便捷，避免互相干扰（side effect）
const MyComponent = () => (
    <div>Hello, World!</div>
);

// 將 <MyComponent /> 组件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

前面说到 React 有独有的 JSX 语法，那么到底什么是 JSX 呢？

JSX在ECMAScript的基础上提供了相似于XML的扩展。 JSX和HTML有点像，但也有不同的地方。例如，HTML中的class属性在JSX中为className。其余不同的地方，你能够参考FB的HTML Tags vs. React Components 这篇文章。

可是因为浏览器原生并不支持JSX，所以咱们须要将其编译为JS，有不少方法可以完成这个任务，后面咱们会提到这些方法。此外，Babel也可以讲JSX编译为JS。

一些参考资料：

通常而言 JSX 一般有两种使用方式：

1.使用 browserify 或 webpack 等 CommonJS bundler 并整合 babel 预处理

2.在浏览器端作解析

请你们注意JSX的语法书写方式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- 請先载入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // 代码写在这里！
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

通常载入 JSX 方式有：

內嵌

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

从外部引入

总结：以上都是我对 React 简单的了解，包括 React 的优点、组件化的特征、React Component 的方法、以及 React 中为什么要使用 JSX，以及 JSX 基本概念和用法。在 React 里，全部的事物都是以 Component 为基础，一般会将同一个 Component 相关的资源放在一块儿，而在撰写 React Component 时咱们常会使用 JSX 的方式来提高书写效率。 JSX 是一种语法相似 XML 的 ECMAScript 语法扩充，能够发挥 JavaScript 的强大能力，放弃蹩脚的模板语言。固然 JSX 并不是强制使用，你也能够选择不用，由于最终 JSX 的内容都会转化成 JavaScript。

以上就是对 React 入门的部分理解。

问答
如何扩展React.js组件？
相关阅读
AI从入门到放弃：CNN的导火索，用MLP作图像分类识别？
开发效率过低?您可能没看这篇文章
 微信车票背后的设计故事
 【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由做者受权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！