React学习-深入DOM抽象

一、Props: props是实现组件组合的关键。props是React的一种从父组件向子组件传输数据的机制。他们在子组件中是不能被修改的;props由父组件传输出去,也被父组件缩“拥有”。

二、state: React的组件可以在this.state里保存可变的数据

三、react中的事件:React中的事件,是通过自动事件委托来实现高性能。React不会将事件处理程序附加到节点自身。相反,他会讲一个单独的事件处理侦听器附加到文档的根节点,当事件触发的时候,React将他映射到适当的组件元素。当组件被卸载的时候,React还会自动的移除对应的事件侦听器。(事件的命名:原生的HTML不是驼峰命名,React中的事件的名称是驼峰命名)。

四、JSX编写代码时注意规范: 1.标签特性才去驼峰式大小写的风格 2.所有元素都必须闭合(没有闭合标签就自闭合) 3.特性名称基于DOM API

五、JSX的使用小技巧:1.单一根节点: React的render中的return方法只能渲染一个跟节点,即只能有一个父级大标签。2.条件语句:在编写jsx的时候if可能会被转化为非法的js语句,因此可以使用三元表达式来解决条件判断中出出现的问题,还可以将条件外置,在jsx外部判断之后赋值,然后在jsx中渲染。

六、空格:JSX不会再多行之间自动渲染一个空格,因此想要一个空格,可以手动插入,使用{“ ”}。这样就可以在多行之间实现一个空格。

七、使用dangerousSetInnerHTML,可以实现在JSX的内部渲染任何的HTML标签。

这么做的意义在于,{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象,可以通过方法调用返回净化后的数据,随后这种标记过的数据可以。注意__html是两个_

被传递给 dangerouslySetInnerHTML。

八、内联样式:在React组件中,可将内联样式指定为一个JavaScript对象。样式的名称才去驼峰式大小写规则,以保持和DOM属性的一致性。此外,并不需要指定像素单位,React会在幕后自动的追加正确的单位。

九、React引入了key特性,key是一个唯一标识符,允许你在需要进行插入、删除、替换和移动时快速的查找元素。每次在循环中创建一个组件的时候,最好能为每个子元素都提供一个key,这样可以帮助React进行匹配同时又能避免性能的瓶颈。

十、子级校正:在React中为了让虚拟的DOM喝真是的DOM保持一致,就需要找出必不可少的最小变化数量,这一过程就叫做子级校正。

十一、refs: 在React中我们大部分是在操作虚拟的DOM,但是在那些有必要操作真是DOM的少数情况下,React提供了一个后门,称为refs。refs可以像字符串属性那样用于任何组件。

猜你喜欢

转载自blog.csdn.net/u013121755/article/details/80844195