React之教程总结

前言

前段时间学习了React，主要的学习资料是一个不错的网站教程，学习的过程基本都是按部就班的学的。在学react之前，我是有jquery的基础的，之前也简单的了解过VUE，知道类似VUE这类框架和jquery是有很大的不同的。在以前，基本都是html+css+js（或jquery）。而在VUE/React这类框架中，已经完全不同了，它们都有自己的渲染页面的规则，作为开发人员，不能用传统的html页面的开发思路去开发VUE/React这类项目了。
学习完React，我最直观的的感受是React这类框架是有上手难度的（相对于jquery等），或者说React它们已经有了自己的一套结构体系，而非jquery那样简简单单的操作dom了。
有点远了，React教程学习完后，90%以上的知识都看懂了，但也仅仅限于看懂，真正的实战还需要后续再项目中不断的应用和积累。

先把这个不错的教程的地址贴出来：
http://www.css88.com/react/docs/hello-world.html

教程本身主要分为快速入门和高级教程两部分，每部分又细分了多个章节，我写这篇博客的目的是对教程的每个章节尽量用一两句话进行概括，这也算是对知识的一种总结方式吧

快速入门

• Hello World
  使用原生React.js编写第一个React项目
• JSX 简介
  在js（确切说是react）中编写html标签，这种方式被称为jsx
• 元素渲染
  react是如何生成html内容的
• 组件(Components) 和 属性(Props)
  组件即React中的基本元素，Props为React传递给组件的属性集合，且只读
• 状态(State) 和 生命周期
  状态即为组件自身维护的、和渲染有关的变量；生命周期即为组件被渲染、加载、卸载的过程
• 处理事件
  为组件中渲染的对象绑定事件，需要注意的是this这个对象的使用，如果直接绑定事件到html标签，this对象是不存在的，需要在当前组件的构造方法中事先bind一下或者直接使用箭头函数进行事件的绑定
• 条件渲染
  根据参数输出不同的内容，可以直接使用if来实现，或者使用&&或者?:
• 列表(Lists) 和 键(Keys)
  es6的迷之map()函数；给list中的每个元素（例如ul标签中的每个li标签）加上唯一的key标识
• 表单(Forms)
  受控组件（react控制其值）和不受控组件（元素自身维护其值）
• 状态提升(Lifting State Up)
  子组件接受父组件的state
• 组合 VS 继承（Composition vs Inheritance）
  编写自己的组件时，通常只需继承React.Component，各个组件之间通常不需要继承，而是使用组合的方式将它们进行组装
• React 的编程思想
  如何讲一个页面进行拆分，使其能够使用React进行开发和实现

高级指南

• 深入 JSX
  React的作用域、开发规范、props、<Booleans, Null, 和 Undefined>
• 使用 PropTypes 进行类型检查
  es6的变量类型检查
• 静态类型检查
  使用 Flow 和 TypeScript 进行类型检查
• Refs 和 DOM
  使用refs来获取目标组件实例
• 不受控组件
  元素自身控制其值（相对于React控制其值而言）
• 优化性能
  了解react渲染时机
• 不使用 ES6
  使用create-react-class来创建React组件
• 不使用 JSX
  使用React.createElement代替JSX
• 一致性比较（Reconciliation）
  React内部减少渲染内功的机制
• 上下文(Context)
  不要使用上下文，而使用props和state代替
• 片段(Fragments)
  React的reader只能返回一个元素，如果必须返回多个，可以使用React.Fragment或<></>将其包裹
• 插槽(Portals)
  如何将元素渲染到父元素之外的位置
• 错误边界(Error Boundaries)
  React的错误处理
• Web 组件(Web Components)
  第三方web组件和React互相嵌套
• 高阶组件(Higher-Order Components)
  这个没搞懂
• 与第三方库协同
  论如何在React中使用jquery
• 与其他库整合(Integrating with Other Libraries)
  杂项
• 代码拆分(Code-Splitting)
  代码打包的10086种方式

呼，终于写完了，累死我了