读书笔记--《深入React技术栈》（二）

本文为读书笔记系列之一——《深入React技术栈》第一章下
之前在up主蜡笔与小勋那里了解到一些快速阅读的方法：
将文章中你觉得有用的文字或段落记录下来，然后写你的读书感受，这样才能更快更好地读好一本书，把一本厚厚的资料读薄。以后看看自己记录的笔记，很快就能回忆起其他的内容（联想记忆）。希望我坚持下来吧，ヾ(◍°∇°◍)ﾉﾞ

初入React世界

1.3 React组件

1.3.1 组件的演变

1. 在 MV* 架构出现之前，组件主要分为两种：

   • 狭义上的组件，又称为UI组件。组件主要围绕在交互动作上的抽象；
   • 广义上的组件，及带有业务含义和数据的UI组件组成。这类组件不仅有交互动作，更重要的是有数据与界面之间的交互。

2. 对于UI组件来说，一定会有3个部分组件：结构、样式和交互行为，分别对应着 HTML 、 CSS 和 JavaScript 。

3. 组件封装的基本思路就是面向对象思想。交互基本上以操作 DOM 为主，逻辑上是结构上哪里需要变，我们就操作哪里。此外，对于js的机构，我们得到了几项规范标准组件的信息：

   • 基本的封装性：可以通过实例化的方法来制造对象；
   • 简单的生命周期呈现：最明显的两个方法 constructor 和destroy，代表了组件的挂载和卸载过程；
   • 明确的数据流动：这里的数据指的是调用组件的参数。

4. W3C标准委员会最近才将类似的思想制定成了规范，称为 Web Components 。这个规范是想统一Web段关于组建的定义。它通过定义 Custom Elements （自定义元素）的方式来统一组件。每个自定义元素可以定义自己对外提供的属性、方法，还有事件，内部可以像写一个页面一样，专注于实现功能来完成对组件的封装。

5. Web Components的4个组成部分：

   • HTML Templates定义了之前模板的概念
   • Custom Elements 定义了组件的展现方式
   • Shadow DOM 定义了组件的作用域范围、可以囊括样式
   • HTML Imports 提出了新的引入方式

1.3.2 React组件的构建

1. React的本质就是关心元素的构成，React组件即为组件元素。组件元素被描述成纯粹的JSON对象，意味着可以使用方法或是类来构建。

2. React组件基本上由3个部分组成——属性（ props ）、状态（ state ）以及生命周期方法：

   • -> state、props -> 生命周期 -> Render ->
   • 生命周期的setState -> state、props

3. React组件可以接收参数，也可能有自身状态。一单接受到的参数或自身状态有所改变，React组件就会执行相应的生命周期方法，最后渲染。整个过程完全符合传统组件所定义的组件职责。

4. React 与 Web Components：

   • 从React组件上看，它与 Web Components 传达的理念是一致的，但两者的实现方式不同：
     • React 自定义元素是库自己创建的，与Web Components规范并不通用；
     • React 渲染过程包含了模板的概念，即1.2节所讲的JSX；
     • React 组件的实现均在方法与类中，因此可以做到相互隔离，但不包括样式；
     • React 引用方法遵循ES6 module标准。

5. React 组件的构建方法：

   • React.createClass构建组件是React最传统、也是兼容性最好的方法：

     const Button = React.createClass({
       getDefaultProps(){
                 return {
     
                 }
             }
         },
       render(){
     
           return (
               <></>
           );
       }
     );

   • ES6 classes是通过ES6标准的类语法的方式来构建方法

     import React, { Component } from 'react';
     class Button extends Component{
      constructor(props)
      {
          super(props);
      }
      static defaultProps = {
     
      };
      render(){
     
          return (
              <></>
          );
      }
       

   • 无状态函数（stateless function）,官方颇为推崇

     function Button({}){
         return (
             <></>
         );
     }
       

打赏