react 主要概念笔记

2018/11/8 Javascriptreact

React v16.5.2 文档学习

# Hello World

React 应用的构成模块：元素和组件

# JSX 简介

JSX 是一种 JavaScript 的语法扩展，推荐在 React 中使用 JSX 来描述用户界面。可以在 JSX 中任意的使用 JS 表达式，但是 JS 表达式要放在大括号里。

JSX 本身也是一种表达式，在编译之后，JSX 会被转化成普通的 JS 对象。 JSX 的中，ReactDOM 使用小驼峰来命名。

JSX 防注入攻击，因为 React DOM 在渲染之前默认会过滤所有传入的值，所有的内容在渲染之前都被转换成了字符串。可以有效的防止 XSS 攻击。

JSX 代表 Objects，Babel 转译器会把 JSX 专换成一个名为React.createElement()的方法调用。 React.createElement()会返回一个对象，这个对象被称为“React 元素”。React 通过读取这些对象来构建 DOM 并且保持数据一致。

# 元素渲染

元素是构成 React 应用的最小单位。元素用来描述在屏幕上看到的东西，React 中的元素是普通的 JS 对象，ReactDOM 可以确保浏览器 DOM 的数据和 react 元素保持一致。

在 Html 页面里定义一个id="root"根节点。然后通过ReactDOM.render()方法，将 React 元素渲染到根 DOM 里。

更新元素渲染，是创建一个新的元素，然后用ReactDOM.render()方法，将 React 元素渲染到根 DOM 里。但是，React DOM 会比较元素内容先后的不同，然后在渲染过程中，只更新改变了的部分。

# 组件&props

组件是独立的可复用的 ui 部件，从概念上看就像是函数，可以接受任意的输入值（props），并返回一个 React 元素。

定义组件，可以是一个 JavaScript 函数或者用一个 ES6 的 class 来定义一个组件。 React 元素可以是 DOM 标签，也可以是自定义的组件。组件名称必须以大写字母开头。并且在使用组件时，需要引入或者定义它。组件可以在输出中引用其他组件，但是组件的返回值只能有一个根元素。

Props 的只读性，无论是使用函数或者时类来声明一个组件，它不允许修改自己的 props。所有的 React 组件必须像纯函数那样使用它们的 props。

# State&生命周期

使用类来声明一个组件，可以允许使用局部状态，生命周期钩子等。使用类声明组件时，使用constructor把 props 传递到组件里:

constructor(props) {
  super(props);
  this.state = {date: new Date()};
}

生命周期：当组件第一次加载到 DOM 中的时候，称为挂载；当组件生成的 DOM 被移除时，称为卸载。

正确的使用状态： 1、不要直接更新状态，直接更新不会重新渲染组件，应使用this.setState({})来更新。 2、状态更新可能是异步的。 3、状态更新合并，也可以独立更新。

数据自顶向下流动。父组件和子组件都不知道某一个组件是否有状态，所以状态被称为局部状态，除了拥有并设置它的组件外，其他组件不可访问。组件可以选择状态，当作属性传给子组件。这被称为单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。可以在有状态组件中使用无状态组件，反之亦然。

# 事件处理

React 的事件绑定属性的命名采用驼峰式写法，并为其赋值一个事件处理函数。在函数中，要调用preventDefault()方法来阻止默认行为。

事件绑定 this：因为类的方法不会默认绑定 this，所以用 ES5 写函数的时候，在调用的时候，需要在 constructor 里绑定 this。也可以用 ES6 的箭头函数来写。

用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

# 条件渲染

可以使用 if..else..语句来条件渲染。可以使用与运算符 &&来条件渲染可以使用 JavaScript 的条件运算符 condition ? true : false 来条件渲染

阻止条件渲染，可以用三目运算符，让 render 方法返回 null 而不是它的渲染结果即可实现。组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。

# 列表 & Keys

使用 map()函数，让每一个元素返回一个标签或者组件。

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给列表中的每一个元素赋予一个确定的标识

元素的 key 在他的兄弟元素之间应该唯一

# 表单

其值由 React 控制的输入表单元素称为“受控组件”

通过受控组件，来构造一个处理提交表单并可访问用户输入表单数据的函数在 react 中，受控组件需要使用 this.setState 来进行更新。使用”受控组件”,每个状态的改变都有一个与之相关的处理函数。这样就可以直接修改或验证用户输入。

# 状态提升

使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。在 React 应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持自上而下的数据流，而不是尝试在不同组件中同步状态。

帕吉小馆

Choose mode