React知识点整理

元素的渲染

• 什么是 React 元素

  • 元素是构成 React 应用的最小单位，用 ReactDOM.reader() 方法渲染。 元素是普通的 js 对象，是构成组件的一个部分。

• 建立 React 元素

  • 使用 JSX 语法：const element = <h1>Hello, world</h1>;，JSX 语法是用 React.createElement() 来构建 React 元素的。

  • React.createElement()，接受三个参数：1. 能够是一个标签名（如div、span、或 React 组件）；2. 为传入的属性；3. 组件的子组件。

  • React.cloneElement()，与 React.createElement() 类似，不一样的是它传入的第一个参数是一个 React 元素，而不是标签名或组件；新添加的属性会并入原有属性，同属性名新的会替换旧的，传入到返回的新元素中。

• 渲染 React 元素到 DOM

  • 渲染粗略过程：React元素描述的是 虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。
  • 渲染详细过程：1. 先调用 React.createElement() 编译成上面的 js 对象（也就是虚拟DOM节点）；2. 而后再调用 ReactDOMComponent( vdom).mountComponent() 将虚拟DOM变成真实的DOM；3. 最后用 appendChild( domNode ) 插入DOM树，显示出来。

• 更新已渲染的元素

  • React 元素是不可变的，咱们一旦建立了一个元素，就不能再修改其子元素或任何属性，所以咱们更新 UI 的惟一方法就是建立一个新的元素，并将其传入 ReactDOM.render() 方法中。

• 只更新必需要更新的部分

JSX 简介

JSX 是 一种 JavaScript 的语法扩展，运用于 React 架构中，它是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。

JSX就是 Javascript 和 XML 结合的一种格式，React 发明了 JSX，利用HTML语法来建立虚拟DOM。当遇到 <，JSX就当HTML解析，遇到 { 就当 JavaScript 解析。

**注意：**大括号里是 JavaScript，不要加引号，加引号就会被当成字符串。

组件 & Props

组件能够将UI切分红一些独立的、可复用的部件，这样就只需专一于构建每个单独的部件了。

• 定义组件

  • 函数定义组件（JavaScript函数）
  • ES6 class 定义组件

• 自定义组件（组件名称必须以大写字母开头）

• 组件渲染（组件名必须大写字母开头）

  • 将组件做为React元素，标签的属性做为props键值。

• 组合组件（返回值只能有一个根元素）

  • 组合组件它能够在输出中引用其余组件，在 React 应用中，按钮、表单、对话框以及整个屏幕的内容均可被表示为组件。

• 提取组件

  • 能够将组件切分为更小的组件。

• Props 的只读性

  • 不管是使用函数或是类来声明一个组件，它都不能修改它本身的props值。

state & 生命周期

修改 state 时使用 setState()。

• 将函数转换为类

  • 建立扩展名为 React.Component 的ES6类
  • 建立 render() 空方法
  • 将函数体移动到 render() 方法中
  • 在 render() 方法中使用 this.props 替换 props

• 为一个类添加局部状态

  • 在 render() 方法中使用 this.state.date 替代 this.props.date
  • 添加一个类构造函数来初始化状态 this.state
  • 从 <Clock /> 元素移除 date 属性

• 将生命周期方法添加到类中

  • 当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数；
  • React 而后调用 Clock 组件的 render() 方法；
  • 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子；
  • 浏览器每秒钟调用 tick() 方法；
  • 一旦 Clock 组件被从DOM中移除，React会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。

• 正确地使用状态 关于 setState() ：

  • 不能直接更新状态，应当使用 setState()； -更新状态多是异步的，构造函数是惟一可以初始化 this.state 的地方；
  • 状态更新合并（浅合并），当更新一个状态时，其余的状态保持不变。

• 数据单向流动

  • 从父节点传递到子节点，由于组件是简单而且易于把握的，咱们只须要从父节点获取props渲染便可，若是顶层组件的某个props改变了，那么 React 会递归的向下遍历整棵组件树，从新渲染全部使用这个属性的组件。

事件处理

• 语法差别

  • React 事件绑定属性的命名采用驼峰式写法，而不是小写。
  • 若是采用 JSX 的语法咱们须要传入一个函数做为事件处理函数，而不是一个字符串。
  • return false; 不会阻止组件的默认行为，须要调用 e.preventDefault();

• 尽可能不要使用 addEventListener

• 绑定事件处理函数的 this

  -经过 bind 方法，原地绑定事件处理函数的 this 指向（特色：书写简单，可是每次渲染都会执行生成一个新函数） -经过一个箭头函数将真实的事件处理函数包装（特色：能清晰描述事件处理函数接收的参数列表） -在 constructor 中预先将全部的事件处理函数经过 bind 方法进行绑定（特色：解决了前两种方法的额外开销和从新渲染的问题，可是书写有点复杂） -使用类成员字段定义语法（特色：解决了上述三种问题，惟一的就是它还没被正式归入 ES5 规范中）

表单（Forms）

HTML 表单元素与 React 中的其余DOM元素有所不一样，由于表单元素生来就保留了一些内部状态。

• 用value实现受控组件

  • < input type=”text”/>
  • <textarea>，经过它的子节点定义了它的文本值
  • <select>，建立下拉列表

• file input 标签

• 处理多个输入元素

• 受控 input 组件的 null 值

  • 在受控组件上指定值 prop 可防止用户更改输入，若是咱们指定了一个 value，可是输入的值却仍然是能够编辑的，那么可能会之外的把 value 设置为 undefined 或者是 null。

CSS 和 SASS

CSS

• 内联样式：使用内联样式属性设置元素样式，值必须是JavaScript对象。

  • camelCased属性名称：因为内联CSS是用JavaScript对象background-color 编写的，所以必须使用camel case语法编写具备两个名称的属性。
  • JavaScript 对象：使用样式信息建立对象，并在style属性中引用它。

• CSS 样式表

  • 在单独的文件中编写CSS样式，只需使用 .css 文件扩展名保存 文件，而后将其导入应用程序。

• CSS 模块

  • 向应用程序添加样式的另外一种方法是使用CSS模块，它便于放置在单独文件中的组件。

Sass

• Sass是一款CSS预处理器，它的文件在服务器上执行，并将 CSS 发送到浏览器。

条件渲染

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操做符 if 或条件运算符来建立表示当前状态的元素，而后让 React 根据它们来更新 UI。

• if 语句，在React中使用if语句条件渲染是最简单的，if... else 是最基本的条件渲染方式，用 if 从渲染方法中返回null提早退出函数 。
• 三元操做符，两种模式（edit，view），它使条件渲染更加的简洁,使得代码能够采用内联(inline)的方式表达出来。 逻辑 && 操做符，不返回元素就返回null时使用。
• switch... case 语句，比较冗长，能够经过当即调用函数内联使用。
• 枚举（enums），使用多种条件渲染最好的方式是枚举，在javascript中，对象的键值对能够用做枚举。
• 多层条件渲染，也被叫作嵌套条件渲染。
• 使用高阶组件（HOCs）， 使用高阶组件而屏蔽条件渲染，它的一种使用方式就是改变组件的外观，组件能关注主要的逻辑目的 。

列表 & Keys

Keys 能够在DOM中的某些元素被增长或删除的时候帮助 React 识别哪些元素发生了变化。

• 列表（Lists）

  • 多组件渲染
  • 基本列表组件

• 键（Keys）- 帮助 React 标识哪一个项被修改、添加或者移除了

  • 使用 keys 提取组件，keys 只在数组的上下文中存在乎义。
  • 在数组中使用的 keys 在同辈元素中必须是惟一的。
  • keys 的内部性，键是React的一个内部映射，但其不会传递给组件的内部。

React 理念

React 最初的目的是使用 JavaScript 建立大型的，快速响应的网络应用。

React 的众多优势之一是它让咱们在编写代码的时候同时也在思考咱们的应用。

咱们须要了解的五大核心概念有：

• 组件
• JSX
• Props & State
• 组件 API
• 组件类型

使用 PropTypes 检查类型

React 组件参数类型的验证。

高阶组件

高阶组件就是一个函数，且该函数接受一个组件做为参数，并返回一个新的组件。也就是说，高阶组件是参数为组件，返回值为新组件的函数。