全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

React 快速入门小记

0 239

大约半个月前,我一直在思考一个问题,Angular、React 和 Vue,究竟该学什么?

听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我“没有选错”。

十天的时间,把 React 的快速入门文档给过了一遍,整理了一些笔记,现在记录如下。

JSX 简介

可以在 JSX 中嵌入 JavaScript 表达式,并用花括号包裹。

使用括号包裹 JSX 表达式,并将其拆分为多行以提高可读性。也可以避免自动插入分号。

由于 JSX 是在 JavaScript 中使用的,React DOM 的属性使用 camelCase 命名。

JSX 是安全的,可以防止注入攻击。

渲染元素

元素是元素,组件是组件。

React 元素是只读的,一旦创建,就不能改变它的子元素和属性。

就目前来说,更新 UI 的唯一方法是创建一个新的元素,并传递给 ReactDOM.render()

在实践中,大多数应用程序只调用一次 ReactDOM.render()

当调用 ReactDOM.render() 时,只有发生改变的节点才会被 React DOM 更新。

组件和属性

从概念上讲,组件就像 JavaScript 函数,它们接收输入,并返回 React 元素。

可以使用 ECMAScript 6 的类来定义组件,类有一些额外的功能。

组件的名称总是以大写字母开始。

组件中可以使用组件。

如果要将 React 集成到现有应用程序中去,可以优先编写小的组件,自下而上。

组件越小越好。

一个好的经验法则:如果 UI 被多次使用,或者 UI 本身足够复杂,那么就可以将它做成组件。

组件的属性是只读的。

所有的 React 组件必须像纯函数那样使用它们的属性。

状态和生命周期

状态类似于属性,但它是私有的,完全由组件控制。

componentDidMount() 在组件呈现到 DOM 之后运行。

状态有特殊的意义,如果需要存储不影响视觉输出的内容,并不在 render() 中使用,则可以手动向类中添加其它字段。

不要直接修改状态,而是通过调用 this.setState() 来修改状态。

React 可以将多个 this.setState() 调用批处理为一个 this.setState() 以实现性能上的提升。

更新状态是异步的,不能依赖上一个状态值来计算下一个状态值。 要解决它,应当使用函数而不是对象。该函数将接收先前的状态做为第一个参数,并将属性做为第二个参数。

当调用 this.setState() 时,React 会将对象合并到当前状态。

父组件和子组件都不知道某个组件是有状态还是无状态的,并且不应该关心它是否被定义为函数或类。

组件可以选择将状态做为属性传递给子组件。

组件以及它的数据只能影响子组件,这通常被称为自上而下或单向数据流。

处理事件

DOM 事件使用全小写命名,而 React 事件使用 camelCase 命名。

使用 JSX 传递一个函数做为事件处理程序。

不能返回 false 来阻止 React 中的默认行为。必须显式调用 event.preventDefault()

当使用 ECMAScript 6 的类定义组件时,常见的做法是将事件处理程序做为类上的方法。

如果在 ECMAScript 6 的类中使用事件,必须手动在构造函数中绑定。 或者在回调中使用箭头函数,但是每次呈现时都会创建不同的回调。大多数情况下这么做是可以的,但是在底层组件中,可能会执行额外的渲染,一般建议在构造函数中绑定,以避免这种性能问题。

条件呈现

如果条件过于复杂,可能是提取组件的好时机。

列表和键

应给数组中的元素赋予键,以给元素一个唯一的身份。

如果数组中的元素是组件,应该将键保存在组件上,而不是组件中的元素上。

一个好的经验法则是,map() 中的元素需要键。

键被 React 使用,不会传递给组件,如果要使用,则使用不同的名称,做为属性显式传递。

如果嵌套太深,可能是提取组件的好时机。

表单

值不会随用户的输入而改变,因为组件已声明值,且始终是原来的值。 若要响应用户输入的值,则使用 onChange 事件保存用户输入的值。

要初始化具有非空值的不受控制的组件,可以使用 defaultValue/defaultChecked 属性。

对于