React

1：安装react-router-dom2：引入Link,作为跳转指向这里往往用于导航3：引入Route让React知道跳转到哪个组件4：Route和Link必须在一个路由器下，可以将整个App包含在

区别一一般组件写在components文件夹下,路由组件写在pages文件夹下区别二路由组件会收到路由传递过来的props，而普通组件则不会

import MyNavLink from '.

1：安装pubsub-js2：引入pubsub库3：发布消息4：订阅消息

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bddd7b08bc5a47e087e6cf9e95a8f15b~tplv-k3u1fbpf

<meta name="viewport" content="width=device-width, initial-scale=1.<script src="../js/react.development.<script src="../js/react-dom.develop...

js创建虚拟DOM太过繁琐，尤其在创建嵌套的虚拟DOM，React中的jsx的出现，允许我们像写HTML一样编写虚拟DOM。https://www.bilibili.

React是一个将数据渲染成HTML视图的开源JavaScript库。原生JS操作DOM繁琐，效率低。使用JS直接操作DOM，浏览器会进行大量的重排和重绘。原生JS没有组件化的编码方案，代码复用率低。采用组件化的模式，声明式编码，提高开发效率和组件复用率。在React Nativ...

实现如下DOM结构使用传统的js使用JSX总结：推荐使用JSX的方式写虚拟DOM

虚拟DOM是Object类型的对象虚拟DOM的属性比较少，真实DOM的属性比较多。虚拟DOM最终会被React转化为真实DOM，并呈现在页面上。

若标签的首字母为小写字母，则将其转化为HTML标签对应的标签，没有则报错。若标签的首字母为大写字母，React就去渲染对应的组件，若组件没有定义则报错。

表达式会有一个返回值。

模块是对JS文件的一个拆分，使得一个复杂的JS文件被拆分为拥有很多不同功能的模块。组件是用来实现局部功能效果的所有资源的一个集合。当应用的js文件都以模块来编写的，这个应用就是一个模块化的应用。当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

创建函数式组件的步骤创建函数式组件渲染函数式组件到页面注意：组件的标签名首字母要大写标签名在渲染的时候，最后要加/函数式组件中的this指向的是谁？undefined因为babel开启了严格模式，所以

类组件必须继承React.

在组件类的构造器中修改先给构造器传参数props，这个参数是React自动给我们传的。

React中的点击事件在JSX语法的行内添加点击事件onClick中的C要大写使用{}包裹函数，函数后面不要加上()

下面两种写法，state和demo都是直接写到实例对象中的。

状态不可直接更改状态必须通过setState修改

通过props属性可以在渲染类组件的时候，给类传参。对props的类型和必要性进行限制使用这个限制之前需要引入prop-type.