前白
前白

React 知识点总结

元素的渲染

  • 什么是 React 元素

    元素是构成 React 应用的最小单位，用 ReactDOM.reader() 方法渲染。

    元素是普通的 js 对象，是构成组件的一个部分。

  • 创建 React 元素

    使用 JSX 语法：const element =

    Hello, world

    ;，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

    • 从 元素移除 date 属性

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

    • 当 被传递给 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”/>