React 术语表

单页面应用 Single-page Application

单页面应用,第一次会加载应用程序运行所需的单个的HTML页面和所有必需的资源(如JavaScript和CSS)。 之后任何与页面或后续页面的交互都不需要再往返于服务器,即页面不会再被重新加载。

尽管你可以通过React构建一个单页面应用,但单页面应用对于React而言并不是必需的。 React也可以只用于现有网站中的一小部分以增加交互性。 用React编写的代码可以和服务端渲染标记(如PHP)或其他客户端库完美兼容。 事实上,React在Facebook中也是这样使用的。

ES6, ES2015, ES2016等

这些缩略词都是指最新版本的ECMAScript语言规范标准,而JavaScript语言是它们的一个实现。ES6版本(也被称为ES2015)包括许多新特性,如:箭头函数、类(class)、模板字面量、letconst 变量声明等。你可以在这里了解更多版本新特性。

编译器 Compilers

JavaScript编译器用于转换JavaScript代码,并用其它格式返回JavaScript代码。最常见的用例是采用ES6语法编写代码并将其转换为旧版浏览器能够识别的语法。 React最常用的编译器是Babel

打包工具 Bundlers

开发中将JavaScript和CSS代码编写为单独的模块(通常为数百个),打包工具会针对浏览器将它们组合并优化为几个文件。WebpackBrowserify是在React应用程序中常用的打包工具。

包管理工具 Package Managers

包管理工具允许你通过依赖项来管理项目。npmYarn是React应用程序中常用的包管理工具。它们都是使用相同npm包注册表的客户端。

CDN

CDN即内容分发网络。 CDN从全球各地的服务器网络提供静态内容的缓存。

JSX

JSX是一种JavaScript的语法扩展。JSX与模板语言相似,但它具有JavaScript的全部功能。JSX会被编译为React.createElement()方法调用,将返回名为“React elements”的普通JavaScript对象。JSX的基本教程参见这里,更多高级指引参见这里

React DOM使用属性名称使用驼峰法代替HTML属性名称。例如,tabindex在JSX中写作tabIndex。由于class是JavaScript中的保留字,class属性用className替代:

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

元素 Elements

React元素是React应用程序的最小单位。初学者很可能把元素的定义和定义内涵更广的“组件”给搞混了。元素用来描述界面上的任何东西。 React 元素都是immutable不可变的。

const element = <h1>Hello, world</h1>;

通常不直接使用元素,而是从组件返回。

组件 Components

React组件是小的,可复用的代码片段,它返回一个React元素用于渲染页面。 定义一个组件最简单的方式是使用JavaScript函数,它返回一个React元素:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件可以按照功能分解成不同的部件,并在其他组件中使用。组件可以返回其他组件,数组,字符串或数字。当你的UI中有一部分重复使用了好几次(比如,Button、Panel、Avatar),或者其自身就足够复杂(比如,App、FeedStory、Comment),类似这些都是抽象成一个可复用组件的绝佳选择,这也是一个比较好的做法。 组件名称应始终以大写字母开头 (<Wrapper/> 而不是 <wrapper/>)。参见 这里获取更多有关渲染组件的信息。

props

props是React组件的输入内容。 它们是从父组件传递给子组件的数据。

请记住,props 是只读的。 不应该以任何方式修改它们:

// 错误!
props.number = 42;

如果你需要修改某些值以响应用户输入或网络响应,请使用state

props.children

props.children在每个组件上都可用。 它会包含组件的开始和结束标记之间的内容。 例如:

<Welcome>Hello world!</Welcome>

Welcome组件中的props.children中可以获取字符串Hello world!

function Welcome(props) {
  return <p>{props.children}</p>;
}

定义成类组件时,使用this.props.children

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

状态 state

当某个组件与其关联的某些数据随时间而改变时,组件中需要使用state。例如,Checkbox组件中的状态需要转变为isChecked,或者NewsFeed 组件可能希望追踪其状态中的fetchedPosts

stateprops之间最重要的区别是props是从父组件传递的,而state是由组件本身管理的。组件不能改变其props,但可以改变state。 通过使用this.setState()。 只有定义为类的组件才可以具有状态。

对于每一个特定的变化数据,应该只有一个“拥有”它的状态的组件。不要尝试同步两个不同组件的状态。状态分享通过状态提升至最近的父组件来完成,并通过props传递给他们。

生命周期函数 Lifecycle Methods

生命周期函数是在组件的不同阶段可执行自定义功能的钩子。当组件被创建并插入到DOM中时,可用函数(mounting),组件更新,以及从DOM卸载或移除组件时可以使用对应的生命周期函数。

受控 & 非受控组件 Controlled vs. Uncontrolled Components

React有两种不同的方法来处理表单输入。

值由React控制的输入表单元素称为受控组件。当用户将数据输入到受控组件中时,会触发状态改变的事件处理程序,并且你的代码将决定输入是否有效(使用更新的值重新渲染)。如果你不重新渲染,那么表单元素将保持不变。

非受控制组件的表单元素在React之外工作。当用户将数据输入到表单域(输入框,下拉菜单等)时,不需要React做任何事情,更新的数据就会被呈现出来。这也意味着你不能强迫表单域都有一个确定的值。

在大多数情况下,你应该使用受控组件。

键值 Keys

“键值”是创建元素数组时需要包含的特殊字符串属性。键值可以帮助React识别哪些元素被更改,添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

确定的标识键值对于重新渲染很重要,这样React才可以确定何时添加,删除或重新排序元素。不要把类似由Math.random()生成的值赋给键值。在理想情况下,键值应该对应于来自数据的唯一且稳定的标识符,例如post.id

Refs

React支持一个可以附加到任何组件的特殊属性refref属性可以是一个字符串或一个回调函数。当ref属性是一个回调函数时,函数接收底层DOM元素或类实例(取决于元素的类型)作为参数。这使你可以直接访问DOM元素或组件实例。

不要过度使用 Refs。如果你发现自己经常在应用程序中使用refs来“搞事情”,请考虑使用状态提升

事件 Events

React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:

  • React事件绑定属性的命名采用驼峰式写法,而不是小写。
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)

协调 Reconciliation

当一个组件的props或状态发生变化时,React通过比较新返回的元素和先前渲染的元素来决定是否需要实际的DOM更新。当它们不相等时,React将更新DOM。 这个过程被称为“协调”。