警告：
由于JSX比HTML更接近JavaScript，所以React DOM使用camelCase属性命名约定而不是HTML属性名称。
例如，class变成className，并tabindex成为tabIndex。
默认情况下，React DOM将转义嵌入在JSX中的任何值，然后再渲染它们。因此，它确保您永远不会注入任何未明确写入应用程序的内容。在呈现之前，所有内容都将转换为字符串。这有助于防止XSS（跨站点脚本）攻击。
其实真正的组件就是类似于一个函数，通过传递不同的参数来映射不同的数据或状态的显示方式，就是类似于<my-header name={dataThing}></my-header>这样的书写形式就相当于函数的调用阶段
始终使用大写字母启动组件名称。
例如，<div />表示一个DOM标签，但<Welcome />表示一个组件，需要Welcome在范围内
对于拆分组件我们有时候虽然看起来很麻烦，但在大型的网站进行搭建时，我们通过这些操作会更好的便利开发，重用代码即是便利开发的重要方式
其次抽象组件其实就是类似于面向对象的封装特性，将具有相同功能的可重复利用的组件封装成函数（函数的定义阶段），同时再用某个组建时，就是就相当于在大组件（也就是大的函数中）调用这个小组件（函数的调用阶段）；同时拆分更小的组件就类似于将更多的封装，这样能更好的节约代码，减少了代码的耦合，
state 和 props
对于props因为它是类似于传进来的参数，作为react的一个规范来讲，我们应该明白组件的属性参数，是由上一级传进来的，作为一个纯函数对待，他不属于这个组件，同时我们也不能对它进行任何修改，我们所得到的结果是不能操作他的如果传进来的props参数相等，那么组件就相同，同时为了能更新UI，我们需要本身私有的一个状态即state去自己影响自己视图的改变，这遵循“别人传的只能看，不能改；只有自己私有的才能为所欲为”，这就是state出现的目的
Paste_Image.png
对于上面的代码显示，其实就是对基于构造函数的一个类的拆分，继承外界传进来的props，然后定义属于自己组件内的私有的状态state，这个构造函数中所盛放的其实就是初始状态和数据，下面的render函数所渲染的才是这个组件的结构代码
在处理事件时，区别HTML中的字符串写法，使用react利用的是驼峰式命名，同时使用JSX，您将作为事件处理程序中传递一个函数，而不是一个字符串！
在react中：
<button onClick={activateLasers}>
Activate Lasers
</button>
其次还有一个区别就是当阻止默认事件时不能通过return false，必须通过preventDefault
在使用HTML：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在使用react中：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
这里的e是一个合成事件，
条件渲染：
通过对条件的判断进行渲染组件
在少数情况下我们希望组件隐藏自身，即使它由另一个组件呈现，要做到这一点，null而
不是渲染输出
key
key可以帮助React识别哪些项目已更改，添加，或删除。
选择关键字的最好方法是使用一个字符串开唯一标识其兄弟的列表项，大多数情况下，可以使用数据中的ID作为关键字，当然如果没用呈现稳定的ID，则可以使用项目索引作为作为最后的手段
key值必须在同层级上是唯一的，没有必要再全局上是唯一的，如果两个元素的key值是相同的，但他们处在不同的集合上，这样也是可以的
同时keys可以作为react的提示，但不会传递给组件，如果组件需要相同的值时，我们需要明确的在不同的属性中进行传值
Paste_Image.png
提升状态
通常，几个组件需要反映相同的变化数据，我们建议将共享状态提升到最接近的共同祖先。
网友评论