大约半个月前,我一直在思考一个问题,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() 以实现性能上的提升。
更新状态是异步的,不能依赖上一个状态值来计算下一个状态值。
要解决它,应当使用函数而不是对象。该函数将接收先前的状态做为第一个参数,并将属性做为第二个参数。

