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

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

初入React世界

1.1 React简介

• React是FaceBook在2013年开源在Github上的JavaScript库。

• React把用户界面抽象成一个组件。

• 开发者通过组合这些组件，最终得到功能丰富、可交互的页面。

• 通过引入JSX语言，复用组件变得非常容易，同时也能保证组件结构清晰。

• 有了组件这层抽象，React把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发页面外，还能用于开发原生移动应用。

1.1.1 专注视图层

• React并不是完整的MVC/MVVM框架，它专注于提供清晰、简介的View层解决方案。
• 而又与模板引擎不同，React不仅专注于解决View层的问题，又是一个包括View和Controller的库。

1.1.2 Virtual DOM

• 真实页面对应一个DOM树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作DOM来进行更新。

• DOM操作非常昂贵。在前端开发中，性能消耗最大的就是DOM操作，而且这部分代码会让整体项目的代码变得难以维护。

• React把真实DOM树转换成JavaScript对象树，也就是Virtual DOM。

• 每次数据更新后，重新计算Virtual DOM，并和上一次生成的Virtual DOM做对比，对发生变化的部分进行批量更新。React也提供了直观的 shouldComponentUpdate 生命周期回调，来减少数据变化后不必要的Virtual DOM对比过程，以保证性能。

• 它最大的好处在于方便和其他平台集成，比如react-native是基于Virtual DOM渲染出原生控件，因为React组件可以映射为对应的原生控件。

1.1.3 函数式编程

• 函数式编程，对应的是声明式编程。

• 声明式编程的本质是lambda演算。

• React把过去不断重复构建UI的过程抽象成了组件，且在给定参数的情况下约定渲染对应的UI界面。

• React能充分利用很多函数是方法去减少冗余代码。

• 函数式编程才是React的精髓。

1.2 JSX语法

1.2.1 JSX的由来

• React为方便View层组件化，承载了构建HTML结构化页面的职责。

• 与其他模板语言不同之处在于React是通过创建于更新虚拟元素来管理整个Virtual DOM的。

• JSX意在通过加入增强语法，使得JavaScript变得更快、更安全、更简单。

• 虚拟元素可以理解为真是元素的对应，它的构建与更新是在内存中完成的，并不会真正渲染到DOM中去。

• 在React中创建的虚拟元素可以分为两类：

  • DOM元素（DOM element）：

    <button class="btn btn-blue">
    <em>Confirm</em>
    </button>

  • 组件元素:

    const DeleteAccount = () =>(
    <div>
        <p>Are you sure?</p>
        <DangerButton>Confirm</DangerButton>
        <Button color="blue">Cancel</Button>
    </div>
    )

• JSX在产品打包阶段都已经编译成纯JavaScript，不会带来任何副作用。

• 使用JSX写法的代码更易于阅读与开发。

1.2.2 JSX基本语法

• JSX的官方定义是类XML语法的ECMAScript拓展。

• JSX基本语法基本被XML囊括了。

  const List = () =>(
  <div>
      <Title>This is title</Title>
      <ul>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
      </ul>
  </div>
  )

• 需要注意几点：

  • 定义标签时，只允许被一个标签包裹。
  • 标签一定要闭合。

• DOM元素和组件元素，在JSX对应规格是HTML标签字母是否为小写字母，其中小写首字母对应DOM元素，而组件元素自然对应大写字母。

• 注释

• DOCTYPE

• 元素属性：在JSX中，不论是DOM元素还是组件元素，它们都有属性。不同的是，DOM元素的属性是保准规范属性，但有两个例外——class和for，因为在JavaScript中这两个单词都是关键词。因此我们这么转换：

  • class属性改为className
  • for属性改为htmlFor

• 而组件元素的属性是完全自定义的属性，也可以理解为实现组件所需要的参数。比如

  const Header=(title,children)=>(

  <h3 title={title}><h3>

  );

• 我们给Header组件加了一个title属性，那么可以这么调用

  <Header title="hello world">Hello World</Header>

• 可以看到，Header和h3中两个title的不同之处，一个代表的是自定义标签的属性可以传递，一个标签自带的属性无法传递。

• 值得注意的是，在写自定义属性的时候，都有标准写法改为小驼峰写法。

• Boolean属性：

  • 属性Boolean属性值会导致JSX认为bool值设为了true。
  • 要传false时，必须使用属性表达式。比如disabled、required、checked和readOnly等。
  • 例如，<Checkbox checked={true} />可以简写为<Checkbox checked />

• 展开属性

  • 如果事先知道组件需要的全部属性，JSX可以这样来写：

    const component = <Component name={name} value={value} />

  • 如果你不知道要设置哪些props，那么现在最好不要设置它：

  const component = <Component />;
  component.props.name=name;
  component.props.value=value;

  • 上述这样是反模式，因为React不能帮你检查属性类型。
  • 这里，可以使用ES6 rest/spread特性来提高效率：

  const data={name:'foo',value:'bar'};
  const component = <Component name={data.name} value={data.value}>

  可以写成

const data={name:'foo',value:'bar'};
const component = <Component {...data}>

更新于2021/11/11 16：43 一章实在太多了

打赏