©
本文档使用PHP中文网手册发布
单页面应用程序是一个加载单个HTML页面和应用程序运行所需的所有必要资源(如JavaScript和CSS)的应用程序。任何与页面或后续页面的交互都不需要往返服务器,这意味着页面不会被重新加载。
虽然您可以在React中构建一个单页面应用程序,但这不是必需的。React还可用于增强现有网站的小部分,并增加交互性。用React编写的代码可以通过PHP或其他客户端库来呈现在服务器上的标记和平共存。事实上,这正是Facebook如何使用React。
这些首字母缩写词都是指ECMAScript语言规范标准的最新版本,这是JavaScript语言的一个实现。ES6版本(也称为ES2015)包含许多以前版本的新增功能,例如:箭头函数,类,模板文字let
和const
语句。
JavaScript编译器接受JavaScript代码,将其转换并以不同的格式返回JavaScript代码。最常见的用例是采用ES6语法并将其转换为旧版浏览器能够解释的语法。Babel是React最常用的编译器。
Bundlers将JavaScript和CSS代码作为单独的模块(通常为数百个)编写,并将它们组合成更好的浏览器优化的几个文件。React应用程序中常用的一些打包器包括Webpack和Browserify。
包管理器是允许您管理项目中的依赖项的工具。npm和Yarn是React应用程序中常用的两个包管理器。他们都是同一个npm包注册表的客户端。
CDN代表内容传送网络。CDN从全球各地的服务器网络提供缓存的静态内容。
JSX是JavaScript的语法扩展。它与模板语言类似,但它具有JavaScript的全部功能。JSX被编译为React.createElement()
调用,它返回名为“React元素”的普通JavaScript对象。要获得对JSX的基本介绍,请参阅此处的文档,并在此处查找关于JSX的更深入的教程。
React DOM使用camelCase属性命名约定而不是HTML属性名称。例如,tabindex
成为tabIndex
JSX。该属性class
也被写为className
自从class
在JavaScript中是一个保留字:
const name = 'Clementine';ReactDOM.render(My name is {name}!
, document.getElementById('root'));
React元素是React应用程序的构建块。人们可能会将元素与更广为人知的“组件”概念混为一谈。一个元素描述了你想要在屏幕上看到的内容。React元素是不可变的。
const element =Hello, world
;
通常,元素不是直接使用,而是从组件返回。
React组件是小的,可重用的代码段,它返回一个React元素以呈现给页面。React组件的最简单版本是一个普通的JavaScript函数,它返回一个React元素:
function Welcome(props) { returnHello, {props.name}
;}
组件也可以是ES6类:
class Welcome extends React.Component { render() { returnHello, {this.props.name}
; }}
组件可以分解成不同的功能块并在其他组件中使用。组件可以返回其他组件,数组,字符串和数字。一个好的经验法则是,如果你的用户界面的一部分被多次使用(按钮,面板,头像),或者它自己已经足够复杂(App,FeedStory,Comment),那么它是一个很好的候选者,可以成为一个可重用的组件。组件名称也应始终以大写字母(
不
)开头。有关渲染组件的更多信息,请参阅此文档。
props
props
是React组件的输入。它们是从父组件传递到子组件的数据。
请记住,props
是只读的。不应以任何方式对其进行修改:
// Wrong!props.number = 42;
如果您需要修改某些值以响应用户输入或网络响应,请state
改为使用。
props.children
props.children
在每个组件上都可用。它包含组件的开始和结束标签之间的内容。例如:
Hello world!
字符串在组件中Hello world!
可用:props.childrenWelcome
function Welcome(props) { return{props.children}
;}
对于定义为类的组件,请使用this.props.children
:
class Welcome extends React.Component { render() { return{this.props.children}
; }}
state
state
当与其关联的某些数据随时间变化时,组件需要。例如,Checkbox
组件可能需要isChecked
处于其状态,NewsFeed
组件可能需要跟踪fetchedPosts
其状态。
之间最重要的区别state
和props
是props
从父组件传递,而是state
由组件本身进行管理。一个组件不能改变它props
,但它可以改变它state
。要这样做,它必须打电话this.setState()
。只有定义为类的组件可以具有状态。
对于每一个特定的变化数据,应该只有一个组件“拥有”它的状态。不要尝试同步两个不同组件的状态。相反,将它提升到最接近的共同祖先,并将它作为道具传递给它们两个。
生命周期方法是在组件的不同阶段执行的自定义功能。当组件被创建并插入到DOM中时(安装),组件更新时,组件被卸载或从DOM中移除时,都有可用的方法。
React有两种不同的方法来处理表单输入。
其值由React控制的输入表单元素称为受控组件。当用户将数据输入受控组件时,会触发更改事件处理程序,并且您的代码将决定输入是否有效(通过使用更新的值重新呈现)。如果你不重新渲染,那么表单元素将保持不变。
一个不受控制的组件就像表单元素在React之外工作一样。当用户将数据输入到表单域(输入框,下拉菜单等)时,更新后的信息会被反映出来,而不需要React需要做任何事情。然而,这也意味着你不能强迫这个领域有一定的价值。
在大多数情况下,您应该使用受控组件。
“键”是在创建元素数组时需要包含的特殊字符串属性。键可帮助React识别哪些项目已更改,添加或删除。应该给数组内的元素赋予元素一个稳定的标识。
键只需要在同一阵列中的同级元素中是唯一的。它们不需要在整个应用程序或甚至单个组件中都是唯一的。
不要传递像Math.random()
键的东西。密钥在重新呈现中具有“稳定身份”非常重要,以便React可以确定何时添加,删除或重新排序项目。理想情况下,密钥应与来自数据的唯一且稳定的标识符相对应,例如post.id
。
React支持可以附加到任何组件的特殊属性。该ref
属性可以是字符串或回调函数。当ref
属性是回调函数时,该函数接收底层DOM元素或类实例(取决于元素的类型)作为其参数。这使您可以直接访问DOM元素或组件实例。
谨慎使用参考。如果您发现自己经常在应用中使用参考“让事情发生”,请考虑更熟悉自顶向下的数据流。
使用React元素处理事件有一些语法上的差异:
React事件处理程序使用camelCase命名,而不是小写。
使用JSX,您将传递函数作为事件处理函数,而不是字符串。
当组件的道具或状态发生变化时,React通过比较新返回的元素和先前渲染的元素来决定是否需要实际的DOM更新。当它们不相等时,React将更新DOM。这个过程被称为“和解”。