react 官方文档翻译系列
react 官方文档翻译
此文档只是针对自己在学习react的过程中进行的翻译。可能不是太专业，但是基于自己的理解，用于往后的查阅来说应该是足够了。
- JSX的介绍
- 渲染元素
- 组件和Props
- State和生命周期
- 事件处理
JSX 的介绍
思考以下变量的声明： const element = <h1>Hello, world!<h1> 以上有意思的语法，既不是字符串，也不是HTML。 我们称之为JSX，它是基于JavaScript的扩展语法。我们推荐在React中使用JSX语法来描述UI应该是什么样子的。JSX也许会让你想到模板 语言，但是它能够很好的与JavaScript结合，具有JavaScript同样强大的功能。 JSX用于生成React的元素（elements），我们将在下一章节探讨如何把它们渲染到DOM上。接下来， 你将会了解到开始使用JSX需要掌握的 一些必要知识。
1. 在JSX中嵌入表达式
在JSX中可以嵌入任何JavaScript 表达式，通过使用一对花括号“{}”进行包裹。
例如2 + 2, user.firstName, 和 formatName(user)都是有效的表达式：import React from 'react';
import ReactDom from 'react-dom';
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDom.render(
element,
document.getElementById('root')
);输出结果为： Hello, Harper Perez! 为了方便阅读，我们把JSX分割成多行来书写，当然并不是必须的，但是如果要这么做的话，我们还是建议用圆括号括起来，从而避免分号自动 插入的陷阱。
2. JSX也是一种表达式
编译之后，JSX表达式就会变成普通的JavaScript对象。 这意味着你可以在if以及for语句块里使用JSX，赋值给一个变量，当做参数传递以及作为函数的返回值：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}3. 使用JSX来指定属性值
你可以使用引号来为属性指定字符串常量值：
const element = <div tabIndex="0"></div>;
你也可以在属性值中使用花括号来嵌套JavaScript表达式：
const element = <img src={user.avatarUrl}></img>;当使用花括号来嵌套JavaScript表达式的时候，不要在花括号外面使用引号来嵌套。否则JSX将会把该值当做一个字符串字面量来处理，而不是 表达式。在同一个属性值当中，你可以使用花括号和引号中的任意一个，但是不能两个都同时使用。
4. 使用JSX来指定子元素
如果一个标签是空的，你可以使用‘/>’进行标签的闭合。看如下的XML:
const element = <img src={user.avatarUrl} />;JSX标签可能会包含子元素：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);警告：比起HTML，JSX更接近于JavaScript，所以JSX采用驼峰式的属性命名约定来代替HTML中的属性名。 例如在JSX中，class变为className, tabindx变为tabIndex。
5. JSX阻止了注入攻击
在JSX中嵌入用户的输入是安全的：
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;默认情况下， 在渲染之前，React Dom会把嵌套在JSX里的任何值进行转义，也就是意味着，你无法注入任何非明确在应用中指定的东西。 在渲染之前，所有的值都会被转换成字符串，这帮助解决了跨站点攻击。
6. JSX 是对象
Babel 把 JSX 语法编译之后，其实就是调用了 React.createElement(). 以下的两个实例是等效的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 在执行的时候进行了一些校验以帮助我们写出更加健壮的代码，本质上它创建了如下的一个对象：
// 注意: 当前这个结构是简化了的
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};这样的对象我们称之为React元素。你可以把它想象为我们在屏幕上所看到元素的一个描述。React读取这些对象，使用它们来构造DOM，并且保持实时更新。 我们将在下一章节讨论如何把React的元素渲染到DOM上。 提示： 我们推荐使用支持Babel的编辑器，从而es6和JSX语法均能够正确的高亮显示。
渲染元素
元素是React应用中最小的构建模块。 一个元素描述了你想要在屏幕上看到的东西：
const element = <h1>Hello, world<h1/>;
不像浏览器DOM元素那样，React元素是简单的对象，并且易于创建。（浏览器的元素创建代价比较昂贵）React DOM 兼顾更新DOM去匹配React元素。 注意： 另外一个被大家熟知的概念“组件”可能会使元素理解起来比较困惑。我们将在下一章节讲解组件。元素是组件 的组成部分， 我们建议在阅读下一章节前仔细阅读该部分的内容。
1. 把元素渲染到DOM
假设在你的HTML文件中有一个<div>元素：
<div id="root"></div>
我们称之为根元素节点，因为在该元素当中的所有内容将会由React DOM 所管理。
使用React构建的应用通常来说只有单一的一个根节点。如果你想在现有的应用中集成React的话，那你可以定义多个
孤立的根节点。
渲染React元素到根DOM节点上，把二者都传递给ReactDom.render():const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);在页面中将会显示： Hello, world
2. 更新已经渲染的元素
React元素是不可变的。只要创建一个元素之后，就不能改变它的子元素和属性。一个元素就像是电影中的某一帧：它 代表了在某一个确定的时间点上的UI展现。 根据我们目前的知识，更新UI的唯一途径是创建一个新的元素，传递给ReactDOM.render()进行渲染。 思考以下时钟的示例：
function tick() {
var element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDom.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);每隔一秒钟setInteval的回调就会去调用一次ReactDom.render（）。
注意： 在实践中，大多数的React应用只调用一次ReactDom.render（）。下一个章节中，我们将会学习如何在
有状态的组件（stateful components）中去封装这样的代码。3. React只会更新需要更新的元素
React DOM会比较前一个元素以及它的子元素，并且只会去更新需要更新的DOM，从而达到预期的效果。 你可以运行上一个例子，通过浏览器工具来进行验证。（以下为实例的截图）
尽管我们在每一秒钟的时候创建了一个描述整个UI树的元素，但是只有文本节点当中的内容被React DOM更新了。
组件和Props
组件可以让你把UI分成独立的，可服用的一些代码块。每一个代码块都可以单独的考虑。 在概念上，组件类似于JavaScript的函数（function）。他们接收任意的输入（称之为“props”），返回一个React 元素， 描述了屏幕上应该显示的信息。
1. 函数（functional）和类（class）申明的组件
定义组件的最简单的方式是写一个JavaScript函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}这个函数是一个有效的React组件，因为它接收一个单一的props对象作为参数，并且返回了一个React元素。我们称之为 函数化的组件，因为从字面上来看它就是一个JavaScript函数。 你同样可以使用es6的class来定义一个组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}从React的角度来看，以上两个组件是等价的。 Classes 有一些其他的特性，我们将在下一章节探讨。鉴于函数化的组件简洁，我们将使用它来进行组件的定义。
2. 渲染组件
在上面的示例中，我们仅仅使用到了表示DOM标签的React元素：
const element = <div />;
另外，元素也可以是用户自定义的组件：
const element = <Welcome name="Sara" />;
当React遇到用户自定义的组件的时候，它把JSX属性当做一个对象传递给组件，我们把改对象称之为“props”。 例如，下面的代码将会把“Hello, Sara”渲染到上：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);让我们回顾下这个示例都发生了什么：
1. 我们调用ReactDom.render()来渲染<Welcome name="Sara" />
2. React调用Welcome组件，把{name: 'Sara'}作为props
3. Welcome组件返回一个<h1>Hello, Sara</h1>元素作为结果。
4. React DOM会及时的更新DOM去匹配 <h1>Hello, Sara</h1>
警告：
组件名称要以大写字母开头。
例如：<div />表示DOM标签，但是<Welcome />代表一个组件。3. 组件的组合
组件可以被另外一个组件所引用。这使得我们可以在不同层级的详细信息中使用同一个组件。一个button，form， dialog，screen：在React中，这些通常都表现为一个组件。 例如，我们可以创建一个多次渲染 Welcome 的组件App:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);典型的，新的React应用会在顶部有一个单一的App组件。然而，如果是在已有的项目中集成React，你可以通过自下而上的方式，从一个小的组件例如Botton开始，按照你自己的方式逐渐的由下而上 到达视图的顶部。 警告： 组件必须返回一个单一根元素的元素。这就是为什么我们添加一个<div>来包含所有的<Welcome /> 元素了。
4. 组件的提取
不要担心把组件切分为更小的组件。 例如，思考如下的 Comment 组件：
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}它接收author(一个对象)，text(字符串)，以及date(日期)作为props，描述了一个社交媒体 网站上的评论。 因为嵌套的关系，这个评论组件不好去做改动，也难于重用其中的个人信息部分。让我们从中提取 一些组件。 首先，我们将提取Avatar：
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}Avatar组件并不需要知道在Comment组件当中被渲染了。这也是为什么我们把prop的name定义为 更加通用的user，而不是author。 我们更加推荐从组件自身的视图角度来命名props，而不是通过他被使用的场景来定义。 现在我们可以稍微的简化下Comment:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}下一步我们将要提取UserInfo组件，该组件紧挨着用户的姓名，渲染一个Avatar组件：
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}这让我们进一步的简化Comment组件：
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}提取组件似乎是一件枯燥乏味的工作，但是在大型的应用中提供了可重用组件的模板。首要的一个原则 就是如果UI中的一部分被使用了多次(Button, Panel, Avatar)，或者足够的复杂（pp, FeedStory,Comment），它将会是可重用组件的最佳候选。
5. Props是只读的
不管你是通过function或者是class的方式申明的组件，它从不会修改它自身的props。思考如下的 Sum函数：
function sum(a,b) {
renturn a + b;
}类似这样的函数我们称之为纯粹(pure)的函数，因为这样的函数不会试图去改变他们的输入参数， 并且相同的输入总是返回相同的结果。 相反，如下的函数并不是纯粹的，因为它改变了它的入参。
function withdraw(account, amount) {
account.total -= amount;
}React非常的灵活，但是它有一条非常严格的规则：
所有的React组件必须像纯粹的函数一样，不去影响到他们的props。
当然，应用程序的UI是随时在变化的。在下一个章节，我们将介绍一个新的概念：state。State允许
React组件根据用户的动作、网络的响应以及其他的事件来改变他们的输出，但是并不违背这一原则。
待续... 相关推荐
游走的豚鼠君 2020-11-10
小飞侠V 2020-09-25
jipengx 2020-09-10
81417707 2020-10-30
ctg 2020-10-14
PncLogon 2020-09-24
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04