QuikieApps

反应缩写:此处包含的所有内容

反应缩写:单页应用程序

单页应用程序是加载HTML页面的设备。同样,该应用程序运行所需的所有强制性资产(例如JavaScript和CSS)。与页面或后续页面的任何交互都不需要访问服务器,这意味着该页面未重新加载。

尽管您可以在React中创建单页提交,但这不是必需的。因此,React还可以用于改善具有附加交互性的可访问网站的微小部分。用React编写的代码可以与PHP之类的在服务器上呈现的标记轻松地共存。同样,这对于其他客户端库也是可能的。实际上,这正是React在Facebook上的实现方式。

ES6,ES2015,ES2016等

所有这些首字母缩略词均指ECMAScript语言规范标准的主要最新版本。这些JavaScript语言是ECMA Script的一部分。 ES6版本主要被称为ES2015,其中包括许多新增功能。较早的版本,如let和const语句,类,模板文字和箭头函数。

编译器

JavaScript编译器获取JavaScript代码,对其进行修改,然后以不同的格式返回JavaScript代码。因此,最常用的模块是采用ES6语法并将其转换为较旧的浏览器可以解释的语法。 巴别塔 是React最常使用的编译器。

捆绑包

捆绑软件将CSS代码和JavaScript编写为单独的模块,有时有数百个。然后将它们合并到一些针对浏览器进行了优化的文件中。因此,React应用程序中通常使用的一些捆绑器包括Browserify和 Webpack.

 

包装经理

程序包管理器是允许您处理项目中依赖项的工具。   和NPM是两个主要在React应用程序中使用的包管理器。他们都是相同NPM软件包注册表的客户。

 

CDN

CDN表示内容交付网络。 CDN从强大的全球服务器网络中传递缓存的静态信息或数据。

 

JSX

JSX是JavaScript的语法补充。它与模板语言相同。但是,除此之外,它具有JavaScript的绝对功能。 JSX与React混在一起。 CreateElement()调用返回纯JavaScript对象,称为“ 反应 elements”。获得JSX的重要机会 在这里查看文件 并找到关于JSX的更深入的研讨会 这里.

反应 DOM具有驼峰式Case属性命名会议,而不是HTML属性名称。例如,tab索引将成为JSX中的tab索引。由于class是JavaScript中的保留词,因此属性class也被指定为className。

const name ='Clementine';

反应DOM.render(

<h1 className=”hello”>My name is {name}!</h1>,

document.getElementById('root')

);

[Courtesy-reactjs.org]

反应元素是React应用程序的构造块。可以将元素与更广为人知的“组件”概念混淆。元素说明您要在屏幕上注意的内容。 反应元素是绝对的。

const元素=<h1>Hello, world</h1>;

[Courtesy-reactjs.org]

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

组件

反应组件是小的可重用的代码段。返回React元素以呈现到页面。 反应组件的最简单描述是一个主要的JavaScript任务,该任务返回一个React元素:

功能 欢迎(props) {

返回<h1>Hello, {props.name}</h1>;

}

[Courtesy-reactjs.org]

组件也可以是ES6类:

类Welcome扩展React.Component {

render(){

返回<h1>您好,{this.props.name}</h1>;

}

}

[Courtesy-reactjs.org]

道具

道具是React组件的输入。它们是从父组件到子组件达成一致的数据。

请记住,道具实际上是只读的。不应以任何方式自定义它们:

//错误!

props.number = 42;

如果要修改一些值以回复网络响应或用户输入,请使用state代替。

道具孩子

在每个组件上都可以访问Props.children。它包括组件的开始和结束标签之间的内容。例如:

<Welcome>Hello world!</Welcome>

[Courtesy-reactjs.org]

字符串你好世界!将在欢迎组件中的props.children中访问:

功能 欢迎(props) {

返回<p>{props.children}</p>;

}

[Courtesy-reactjs.org]

 

对于指定为类的组件,请使用this.props.children:

类Welcome扩展React.Component {

render(){

返回<p>{this.props.children}</p>;

}

}

[Courtesy-reactjs.org]

生命周期方法

生命周期方法是规范功能,可在组件的各个阶段执行。当组件被插入并创建到DOM中时,有一些可访问的方法(安装),模块更新以及组件计数或与DOM远离的时间。

受控 vs. 不受控制的组件

反应有两种使用表单输入进行管理的方法。

其值由React控制的输入表单元素称为a 受控组件。当用户将数据输入受控成分时,将触发变更事件处理程序,并且您的代码将确定输入是否合适(通过使用合理值进行重新呈现)。如果您不重新渲染,那么form元素将保持不变。

一个  不受控制的组件 表单元素之类的功能在React之外执行。当用户将数据输入表单字段(下拉列表,输入框等)时,有效数据将显示出来,而React却不想做任何事情。此外,这也意味着您不能将字段强制为特定值。

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

按键

“键”是创建元素数组时需要包含的良好字符串属性。按键可帮助React识别已更改,已删除或已添加的内容。应该为数组内的元素提供键,以为元素提供稳定的标识。

它只需要在类似阵列中的同级元素中唯一。他们不希望在整个应用程序甚至一个组件中都独一无二。

不要将Math.random()之类的内容传递给键。强制键在重新渲染时必须具有“稳定的身份”,以便React可以识别何时删除,添加或重新排序项目。最重要的是,密钥应与从您的数据中获取的稳定且唯一的标识符进行通信,例如post.id。

参考

反应链有一个特殊的属性,您可以将其链接到任何组件。 ref属性可以是由以下对象创建的对象 反应.createRef() function 或回调函数或软线(在旧版API中)。如果ref特质是回调职业,则基本DOM问题或类情况基于元素的类别而不同。这使您可以直接访问DOM元素或组成示例。

谨慎使用裁判。如果您通常使用ref搜索自己的应用中的“使事情成真”,请考虑通过 自上而下的数据流.

大事记

使用React元素管理事件有一些区别:

和解

当组件的状态或道具发生变化时,React通过将最近返回的元素与较早呈现的元素进行比较来确定实际的DOM更新是否重要。当它们不平衡时,React将更新DOM。现在,此过程称为“和解”。

 

 

 

Exit mobile version