react入门保姆级笔记

实现效果： 输入内容点击搜索 调用接口获取数据 渲染在列表内 index.js App.js searchList: searchHeader:

工具库：PubSubJs 下载：npm install pubsub-js --save 消息的订阅发布与取消

React本身只关注界面，并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互 react应用需要集成第三方ajax库或自己封装库 常用的ajax库配置代理的方法

功能页面的组件化编码流程 拆分组件：拆分界面抽取组件 实现静态组件：使用组件实现静态页面效果 实现动态组件： 动态展示初始化数据 数据类型 数据名称 保存在那个组件 交互（从绑定事件监听开始） 组件组

一.使用create-react-app创建应用 react脚手架 用于快速创建一个基于React库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer等） 下载好所有相关依赖

验证Diffing算法是否存在 React虚拟DOM中key的作用，对虚拟DOM渲染成真是DOM产生哪些影响

旧生命周期 1.生命周期图 2.渲染流程 (1).初始化阶段 由ReactDOM.render()触发...新生命周期...废弃生命周期

高阶函数&柯里化 高阶函数：如果一个函数复合下面2个规范中任何一个，那函数就是高阶函数。 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数 若A函数，调用的返回值依然是一个函数，那么A就可以称

非受控组件:对于所有输入组件，现用现取为非受控组件 这类组件一般较多使用ref 受控组件:随着输入维护状态是受控组件 一般较多使用oChange事件,ref有性能上的缺陷 推荐使用受控组件

不废话直接展翅 总结 1.通过onXxx属性指定事件处理函数（注意大小写） a. React中使用的自定义（合成）事件，而不是使用的原生DOM事件 ——为了更好的兼容性 b. React中事件是通过事

字符串形式的refs 第一个输入框点击按钮alert数据，第二个输入框失焦alert数据 来吧展示 内联回调函数式的refs 然鹅官方文档说了，当状态更新的时候回调函数会执行两次，第一次返回null

引入 类似state，props也是为组件提供数据来源的方式，不同的是state是自己定义数据，props是接受组件外部数据。 直接上🌰 批量传递多组标签属性 限制传入的数据格式 在对数据格式进行限制

ok为了修改state，我们复习了类class、this指向、原型链、事件绑定，结果state修改，React竟然他喵的不买账，好家伙让我们来看看React本身对状态改变是怎么要求的

原生JS事件绑定 React事件绑定 触发事件时修改state在Weather实例中，this指向实例可以直接获取和修改state，但在自定函数changeWeather中this指向window对象

举个例子 解析 构建类式组件继承自React的Component类，react创建Weather实例传递state、props等属性 Weather实例中继承了state等属性可以直接在构造器中修改s

举个🌰 执行ReactDOM之后发生了啥 React解析㢟标签，找到了Demo组件 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的方法 将render范湖的虚拟DOM转为

举个🌰 执行react渲染之后发生了啥 React解析组件标签，找到component组件。 发现组件式使用函数定义的，随后调用该函数，将返回的虚拟DOM转成真实DOM呈现在页面上

介绍 全称：JavaScript XML react定义的一种类似于XML的JS扩展语法：JS+XML 本质 js语句与表达式 jsx练习

虚拟DOM 本质是Object类型的对象（一般对象） 虚拟DOM比较轻，真实DOM比较重 虚拟DOM会被React转化成真实DOM

前文案例回顾 为什么选择jsx 1.创建虚拟DOM的两种方式 js方式 jsx方式 jsx是原生js创建虚拟DOM的语法糖