• React 的首要思想是通过组件（ Component ）来开发应用 。
  • 所谓组件，简单说，指的是能完成某个特定功能的独立的 、 可重用的代码
  • 这个错误信息的含义是：“在使用 JSX 的范围内必须要有 React。 ”
    也就是说，在使用 JSX 的代码文件中，即使代码中并没有直接使用 React，也一定
    要导人这个 React ，这是因为 JSX 最终会被转译成依赖于 React 的表达式 。

JSX

  • 所谓 JSX ，是 JavaScript 的语法扩展（ extension ），让我们在 JavaScript 中可以编写
    像 HTML 一样的代码 。
  • 特点
    • 首先，在 JSX 中使用的“元素”不局限于 HTML 中的元素，可以是任何一个 React
      组件。
    • React 判断一个元素是 HTML 元素还是 React 组件的原则就是看第一个字母是否大
      写，如果在 JSX 中我们不用 ClickCounter 而是用 clickCounter，那就得不到我们想要的
      结果 。
    • 其次，在 JSX 中可以通过 onClick 这样的方式给一个元素添加一个事件处理函数，
      当然，在 HTML 中也可以用 onclick （注意和 onClick 拼写有区别），但在 HTML 中直接
      书写 onclick 一直就是为人垢病的写法，网页应用开发界一直倡导的是用 jQuery 的方法
      添加事件处理函数，直接写 onclick 会带来代码混乱的问题。
    • onClick 挂载的每个函数，都可以控制在组件范围内，不会污染全局空间 。
      我们在 JSX 中看到一个组件使用了 onClick，但并没有产生直接使用 onclick （注意
      是 onclick 不是 onClick）的 HTML ，而是使用了事件委托（event delegation）的方式处理
      点击事件，无论有多少个 onClick 出现，其实最后都只在 DOM 树上添加了一个事件处理
      函数，挂在最顶层的 DOM 节点上。所有的点击事件都被这个事件处理函数捕获，然后
      根据具体组件分配给特定函数，使用事件委托的性能当然要比为每个 onClick 都挂载一
      个事件处理函数要高

##

  • eject （弹射）命令做的事情，就是把潜藏在 react-scripts 中的一系列技术找配置
    都“弹射”到应用的顶层，然后我们就可以研究这些配置细节了，而且可以更灵活地定
    制应用的配置 。机t命令是不可逆的

React 的理念

  • 归结为一个公式，就像下面这样 ：UI=render(data)
  • 让我们来看看这个公式表达的含义，用户看到的界面（ UI)，应该是一个函数（在这
    里叫 render）的执行结果，只接受数据（ data）作为参数 。 这个函数是一个纯函数，所谓
    纯函数，指的是没有任何副作用，输出完全依赖于输入的函数，两次函数调用如果输人
    相同，得到的结果也绝对相同 。 如此一来，最终的用户界面，在 render 函数确定的情况
    下完全取决于输入数据 。
  • 对于开发者来说，重要的是区分开哪些属于 data，哪些属于 render，想要更新用户
    界面，要做的就是更新 data，用户界面自然会做出响应，

Virtual DOM

  • Virtual DOM 就是对 DOM 树的抽象。 Virutal DOM 不会触及浏览器的部分，只是存在于 JavaScript 空间的树形结构，每次自上而下渲染 React 组件时，会对比这一次产生的 Virtual DOM 和上一次渲染的 Virtual DOM ，对比就会发现差别，然后修改真正的 DOM 树时就只需要触及差别中的部分就行 。