React入门（基于React官网）

翔GG
706 阅读5分钟
  • 为什么使用React：
  1. 组件化开发，代码复用率高。
  2. 提高运行效率，减少浏览器的重绘重排。
  • 特点：
  1. 组件化模式，声明式编程（不像命令式编程那样步骤化），提供开发效率及组件复用率。
  2. React Native中可以使用React语法进行移动端开发。
  3. 使用虚拟DOM和优秀的Diffing算法（虚拟dom的比较），尽量减少与真实DOM的交互。
  4. babel:es6转es5,jsx（js的增强版本，用于react框架）转js。
  • 快速入门：
  1. 网页实践。
  2. 引入三个js文件：babel.min.js、react.development.js（源文件）、react-dom.development.js（驱动虚拟dom的文件）。
  3. npm react到本地开发环境：

     直接创建项目:npx create-react-app my-app。
删除src里面的自带的文件，自己创建实例文件。
编写React代码。

  • 开始上手：
  1. 新建React组件，继承自React组件类；
  2. render方法返回展示在屏幕上看到的内容。
  3. 以前那些类XML的语言可用JSX代替，如React.createElement（'div'）等。
  4. 通过组合这些简单的组件构建复杂的UI界面。
  5. 井字棋小游戏开发：

  • Square组件渲染了一个单独的button。

  • Board 组件渲染了 9 个方块。

  • Game 组件渲染了含有默认值的一个棋盘。

  • 利用prop从父组件把数据传递给子组件，这点和Vue相同。

  • 添加点击效果，为了少输入代码，同时为了避免 

    this造成的困扰，

    使用箭头函数定义点击触发函数。

  • 使用state来记录某些值的变化，跟vue的vuex很相似。

  • 使用state来实现交互效果。

  • 每次调用setState，React会自动更新其子组件。

  • 当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

  • 在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为 **on[Event]**，将处理事件的监听方法命名为** **handle[Event]** 这样的格式。
    **

  • 在hanle里面改变父组件存储的状态，子组件会跟着一起改变。

  • 此时的square组件称为受控组件，完全受到board组件的控制。

  • React中的不可变性：

  1. 用新数据代替旧数据。
  2. 历史追踪功能，可以恢复到原来的状态。
  3. 跟踪不可变数据的变化是比较容易的。
  4. 用以在Reac中确定何时重新渲染。
  • 如果组件功能简单，比如只包含一个render方法，那么可以把该组件实现为函数组件。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。函数组件写起来并不像 class 组件那么繁琐，很多组件都可以使用函数组件来写。
  • props与Vue的区别：子组件里面不需要再定义变量接收，全由父组件控制。
  • 需要顶层实现更多功能时，可以把变量提升到顶层来管理。
  • contact方法会创建一个新数组来保存合的结果，但push是直接修改了原有的数组。
  • React 元素被视为 JavaScript 一等公民中的对象（first-class JavaScript objects）。
  1. 566

  • 当我们需要渲染一个列表的时候，React 会存储这个列表每一项的相关信息。当我们要更新这个列表时，React 需要确定哪些项发生了改变。我们有可能增加、删除、重新排序或者更新列表项，所以需要给每个列表一个key。

  • **我们强烈推荐，每次只要你构建动态列表的时候，都要指定一个合适的 key。**如果你没有找到一个合适的 key，那么你就需要考虑重新整理你的数据结构了，这样才能有合适的 key。

  • 组件的 key 值并不需要在全局都保证唯一，只需要在当前的同一级元素之前保证唯一即可。

  • 如果你没有指定任何 key，React 会发出警告，并且会把数组的索引当作默认的 key。但是如果想要对列表进行重新排序、新增、删除操作时，把数组索引作为 key 是有问题的。

  • ol标签表示有序列表。

  • 总结一下:

  1. React实例由多个组件共同组成。
  2. 每个组件都是一个独立的部分：可具有自己的构造函数，可以自己初始化自己的一个state，进行管理，有自己的一个render函数进行DOM渲染。
  3. 一般应用中，我们会把变量state管理提升到顶层来进行管理，底层组件只需要通过props来获得顶层传递给它的值。
  4. React中，标签可以直接作为React元素进行返回和渲染。
  5. 每次调用setState时，都会触发DOM的重新渲染。
  6. 函数也可以直接作为一个React组件进行渲染。
avatar
文章
阅读
粉丝