You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
12
+
单页面应用(single-page application),是一个应用程序,它可以加载单个 HTML 页面,以及运行应用程序所需的所有必要资源(例如 JavaScript 和 CSS)。与页面或后续页面的任何交互,都不再需要往返 server 加载资源,即页面不会重新加载。
13
13
14
-
Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let`and`const`statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions).
A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/)is the compiler most commonly used with React.
Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/)and[Browserify](http://browserify.org/).
Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/)and[Yarn](https://yarnpkg.com/)are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()`calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html).
React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex`becomes `tabIndex` in JSX. The attribute `class`is also written as `className` since `class`is a reserved word in JavaScript:
40
+
React DOM 使用 camelCase(驼峰式命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。例如,HTML 的 `tabindex`属性变成了 JSX 的 `tabIndex`。而 `class`属性则变为 `className`,这是因为 `class`是 JavaScript 中的保留字:
React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable.
React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
@@ -77,38 +77,38 @@ class Welcome extends React.Component {
77
77
}
78
78
```
79
79
80
-
Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`<Wrapper/>`**not**`<wrapper/>`). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components.
A component needs `state`when some data associated with it changes over time. For example, a `Checkbox`component might need `isChecked`in its state, and a `NewsFeed`component might want to keep track of `fetchedPosts`in its state.
The most important difference between `state`and`props`is that `props`are passed from a parent component, but `state`is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state.
125
+
`state`和`props`之间最重要的区别是:`props`由父组件传入,而 `state`由组件本身管理。组件不能修改 `props`,但它可以修改 `state`。如果要修改 `state`,必须调用 `this.setState()`。只有 class 组件才具有 state。
126
126
127
-
For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them.
127
+
对于所有变化数据中的每个特定部分,只应该由一个组件在其 state 中“持有”它。不要试图同步来自于两个不同组件的 state。相反,应当将其[提升](/docs/lifting-state-up.html)到最近的共同祖先组件中,并将这个 state 作为 props 传递到两个子组件。
Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM.
131
+
生命周期方法,用于在组件不同阶段执行自定义功能。在组件被创建并插入到 DOM 时(即[挂载中阶段(mounting)](/docs/react-component.html#mounting)),组件更新时,组件取消挂载或从 DOM 中删除时,都有可以使用的生命周期方法。
132
132
133
-
## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)
React has two different approaches to dealing with form inputs.
135
+
React 有两种不同的方式来处理表单输入。
136
136
137
-
An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.
In most cases you should use controlled components.
141
+
在大多数情况下,你应该使用受控组件。
142
142
143
-
## [Keys](/docs/lists-and-keys.html) {#keys}
143
+
## [key](/docs/lists-and-keys.html) {#keys}
144
144
145
-
A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.
Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component.
Don't pass something like `Math.random()`to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`.
React supports a special attribute that you can attach to any component. The `ref`attribute can be an object created by [`React.createRef()`function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref`attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.
153
+
React 支持一个特殊的、可以附加到任何组件上的 `ref`属性。此属性可以是一个由 [`React.createRef()`函数](/docs/react-api.html#reactcreateref)创建的对象、或者一个回调函数、或者一个字符串(遗留 API)。当 `ref`属性是一个回调函数时,此函数会(根据元素的类型)接收底层 DOM 元素或 class 实例作为其参数。这能够让你直接访问 DOM 元素或组件实例。
154
154
155
-
Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html).
When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".
166
+
当组件的 props 或 state 发生变化时,React 通过将最新返回的元素与原先渲染的元素进行比较,来决定是否有必要进行一次实际的 DOM 更新。当它们不相等时,React 才会更新 DOM。这个过程被称为“协调”。
0 commit comments