mantou_riji的博客

父子组件兄弟组件祖孙组件。

里面包含的是打包后的内容。

定义UI组件，不暴露在UI组件中使用来读取状态和方法定义容器组件，并进行暴露利用connect生成一个容器组件export default connect(// 映射状态 state =>({count : state }) , // 映射操作状态的方法(从readux/action中引入) {

多页面应用是指每切换一个页面就是一个真正的html页面。单页面应用是指整个应用只有一个完整的页面，点击页面中的链接不会刷新页面只会局部更新，并且数据都需要通过ajax请求获取，并在前端异步展示。单页面，多组件。路由匹配的是只是端口号后面的内容（/about、/history）。那么是如何实现一点击导航栏的选项浏览器地址栏中的路径就改变呢， 这就需要借助history实现。浏览器的BOM身上有一个history，用于管理浏览器的路径、历史记录等。但是BOM原生的history不好操作我们一般用一个封装

之前我们只会父子之间传递消息，所以两个兄弟组件之间传递消息的时候我们不得不使用父子组件通信的方式进行消息的传递，这样无疑是麻烦的。使用消息的订阅与发布机制可以实现兄弟组件之间的通信。子传父：父亲定义带参数的函数，传递给子组件，子组件调用该方法就可以在父组件获取子组件的参数。需要数据的组件订阅消息，拥有数据的组件发布消息， 两者以共同的消息名来发送和获取数据。List 和 Search是兄弟组件现需要实现两组间之间的通信。订阅与发布不仅仅适用于兄弟组件之间，而是适用于。

React本身只关注于界面并不包含发送ajax请求的代码, 但是前端应用需要通过ajax请求与后台进行交互(json数据)，所以 react应用中需要集成第三方ajax库或自己封装。

由于样式最终都会汇总在一个文件夹中，所以如果不同组件的css文件中的样式重名就会产生样式冲突，为了避免冲突我们可以使用样式的模块化。同级目录下的 index.jsx。

react脚手架是由webpack编写的。

但是如果使用id值作为key，就不会有如上效率问题，可以实现真实DOM的复用。，如果key使用的是index，输入框的内容就会出现错乱。使用index作为key可能会引发问题。

组件的渲染： 组件的卸载：组件实例被创建之后会调用组件实例原型上的render函数，同时也会调用componentDidMount函数：实现效果：(组件实现渐变效果，点击按钮可以卸载组件)该效果就可以使用上面提及的函数实现像componentDidMount()、render() 这样的函数就是（或生命周期钩子函数、生命周期钩子）组件从创建到死亡会经历一些特定的阶段，React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的

受控组件和非受控组件非受控组件：表单中所有的DOM 的就是非受控组件即需要用到该数据的时候再获取受控组件：将数据先存放在state中，再显示到页面上。——有点类似于vue的双向数据绑定，只不过在react中需要自己手动实现。需求：有用户名和密码，当点击登陆的时候会弹窗提示用户名和密码。受控组件实现：——数据存储在state非受控组件实现：—— 数据存储在组件实例上高阶函数和函数柯里化高阶函数上述代码有点冗余，函数结构类似只是值不一样，可以提取为一个函数。上述代码中的就是一个高阶函数

组件以函数的形式进行编写，函数的返回值是dom结构。类式组件类补充类的属性存放在实例对象上，类上的方法存放在类的原型对象上。类中的方法默认开启了局部严格模式，this是undefined输出：如果子类中使用构造器，则必须使用调用在render中输出组件实例对象组件的三大属性实际上说的是组件实例的三大属性，而只有类式组件才会有实例，所以组件的三大属性实际上是针对类式组件而言的组件实例对象有三大属性：state一般用来存储一些变量的值，我们知道state属性是在组件实例对象上的，如果想要

XML：xml早期用于存储和传输数据eg：xml传输的数据格式：

/ 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)// 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)jsx创建虚拟DOM还可以写成更舒适的形式。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 1.创建虚拟DOM。// 1.创建虚拟DOM。// 1.创建虚拟DOM。// 1.创建虚拟DOM。