react笔记

官方脚手架npx create-react-app appnamecd appnamenpm start JSX
1. JS中可以直接写html标签
2. 如果要用自己的组件，要以大写字母开头

Fragment 占位符 import React,{ Component, Fragment} from 'react’; 代替div把render里的一块代码包裹起来，查看源码是就看不见外面这层包裹响应式设计思想和事件绑定不操作dom，操作数据数据存储在constructor（）的this.state={}中----------constructor设置state时初始化，直接赋值，其他地方用setState（）函数写在constructor（）函数外，与其同级 父子组件间传值父->子：属性子->父：子组件改变父组件的数据 是通过父向子传入一个方法，子组件调用父组件的方法，从而改变父组件的数据 代码优化：setState（）传函数，实现异步 函数.bind(this)写在consructor中命令式开发声明式开发jQueryreact很多DOM操作减少DOM操作的代码量react特点
* 声明式开发
* 可以与其他框架并存 vue，angular…

	*  index.js中吧react东西是加入到某个DOM节点中
* 组件化

	* 首字母大写的东西
* 单向数据流

	* 父组件可以香子组件传值，子组件只能使用而不能改变（所以子组件只能通过调父组件的方法，让父组件自己去改自己的数据）
	* 因为若多个子组件都引用了父组件数据并修改了，当出现问题时是很难找到哪儿的出现的，不好维护
* 视图层框架

	* 组件树，大型项目时，在非父子组件间传值时，单单用react处理时不行的，要借助其他组件或者框架，这些数据层框架专门用于处理组件间传值，为大型项目做支撑，而react就只处理视图，所以说它是一个视图层框架，而不是一个大型的完整的框架
* 函数式编程

	* react代码写的都是一个个函数，维护起来容易，若函数较大时还可以进行拆分
	* 给前端自动化测试带来便利

chrome ReactDeveloperTools 要翻墙作用：方便进行react项目组件结构查询，右侧能看见组件的state，propsprops接受参数，如何对接收的参数做校验，如何对参数设置默认值用propTypes,DefaultPropsimport PropTypes from ‘prop-types’//propTypes小写TodoItem.propTypes = { content: PropTypes.string,//PropTypes 大写，与引入的相同，对content做校验，必须为一个string类型，这个string类型是在引入的PropTypes 包里面的 deleteItem: PropTypes.func.isRequired, index:PropTypes.oneOfType([PropTypes.number,PropTypes.stirng])}DefaultProps不用引入state，props和render的关系当一个组件的state或props改变时，组件的render函数就会被重新执行，父组件render函数重新执行时，子组件render函数也会重新执行react中render重新渲染，性能很高，因为有虚拟DOM虚拟DOM方案一：假设没有react该怎么实现数据与模版之间的连调
1. state数据
2. JSX模版
3. 数据 + 模板 结合 ，生成真实的DOM，来显示
4. state 发生改变
5. 数据 + 模板 结合 ，生成真实的DOM，替换原始DOM

缺陷：
*   第一次生成一个完整DOM片段
*   第二次生成一个完整DOM片段
*   第二次的DOM替换第一次的DOM，非常耗性能

方案二：
1. state数据
2. JSX 模板
3. 数据 + 模板 结合 ，生成真实的DOM，来显示
4. state 发生改变
5. 数据 + 模板 结合 ，生成真实的DOM，但不直接替换原始DOM
6. 找出新DOM（DocumentFragment）和原始的DOM 做对比，找差异
7. 找到不同的地方XXX
8. 用新DOM的XXX去替换旧DOM的XXX

缺陷：
* 性能的提升不明显（对DOM进行操作，如替换、对比 都是很耗性能的）

方案三：虚拟DOM
1. state数据
2. JSX 模板
3. 数据 + 模板 结合 ，生成真实的DOM，来显示

        <div id=‘abc’><span>hello</span></div>      4.生成虚拟DOM（虚拟DOM就是一个JS对象，用来描述真实的DOM）损耗了性能            [‘div’,{ id = ‘abc’ },[ ’span’,{ }, ‘hello' ] ]  ----------  [dom节点名，属性对象，子节点虚拟DOM对象]      5.state 变化      6.数据 + 模板 ，生成新的虚拟DOM （极大提升了性能）         [‘div’,{ id = ‘abc’ },[ ’span’,{ }, ‘bye bye' ] ]      7.比较新的虚拟DOM和原始虚拟DOM，找到区别是span中的内容 （极大提升了性能）      8.直接操作DOM，改变span中的内容    优点：
1. 虚拟DOM减少了DOM的生成和对比，换成了JS对象的比对，提升了性能！
2. 使得跨端应用得以实现。React Native 写原生代码

	* 之所以能用react写原生应用，得益于虚拟DOM
	* 如果没有虚拟DOM，就是直接从JSX模板跳到真实DOM，真实DOM，浏览器端能解析，但是原生应用是不能被使用的
	* 有了虚拟DOM，是一个JS对象，JS对象在浏览器端能解析，变成真实DOM，而在原生应用，能通过虚拟DOM转换成原生的应用的组件，所以就可以开发网页应用和移动端应用

实际上以上3和4顺序是相反的，先生成虚拟DOM，再生成真实DOM 3.数据 + 模板 结合 ，生成虚拟DOM 4.根据虚拟DOM的结构生成真实的DOM，来显示注意：在组件的render中的标签只是JSX的模版，不要理解成DOM如render() { return

item

//底层 React.createElement(‘div’,{属性}，‘item’) }JSX与真实DOM之间的关联，所以就算不用JSX，我自己也可以通过React.createElement创建虚拟DOM JSX —---------------------------------> JS对象（虚拟DOM）—------------------> 真实DOM React.createElementDiff算法以上方案三第七步，diff—diffrence，比较两个虚拟dom时的算法虚拟DOM什么时候会被比对？——当数据发生改变时（state，props（即父组件的state）），即调用setState（）方法调用setState（）是异步的，为了提高性能
* 若调用三次setState并且间隔时间很短，这时候不会去进行三次虚拟DOM比对，会把三次setState合并成一次setState，然后比对一次虚拟DOM，提高了性能
* setState（）是异步，可以穿一个回调函数

• setState（（）=> { 设置state },()=>{ 成功时回调 } diff算法：
  • 同级比对，一层不满足比对时，下一层就不比对了
  • Key值比对，节点有key值，能够提高虚拟DOM比对性能，前提是key不能是index（要变动），key值要稳定——这就是为什么循环的key值不要用index，若在中间插入一个节点，那么原始虚拟DOM树上和新DOM树上没有变的节点的key值就对不上啦！！！！对比时节点前后就不能建立关系了，key值就失去了意义
  • …

react中的ref： react中获取DOM节点的方法
* e.target
* ref（react中建议用数据驱动的方式操作代码，尽量不要操作DOM，使用ref可能会出现一些问题）：比如和setState一起的时候一定要注意setState是异步的，如在setState之后进行数据获取等操作可以放在setState的回调函数里面

	* ref里面时一个箭头函数哦

<input ref = {(inp) => {this.inpu = inp}} />使用：直接this.inpu 就获取到input的DOM节点react的生命周期函数：指某一时刻组件会自动执行的函数，每一个组件都可以有那么多生命周期函数constuctor不算，因为虽然在创建的这个时刻调用，但是不是react独有的，是es6的语法
* render（）-初次挂载，state和props变化的时刻
* 所有的生命周期函数都可以不写，但render必须自己定义，因为其他的在继承react.component时有默认的

InitializationMountingUpdation-propsUpdation-statesUnmountingconstructor中设置props和statecomponentWillMount组件即将被挂载到页面的时刻执行一次（页面第一次挂载前）componentWillReceiveProps
* 当一个组件从父组件接收了参数
* 如果组件第一次存在于父组件中，不会执行
* 如果组件已经存在于父组件中，就会被执行

componentWillUnmount当组件即将从页面中剔除前执行render做页面挂载可执行多次（初次挂载和state，props变化时）shouldComponentUpdate
* 组件被更新之前调用
* 返回一个boolean，为true，则调完该函数继续执行，若为false，则调完该函数不会执行其他生命周期函数
* 什么时候用false

	* 由于父组件调用render时，不管子组件dom有没有变化都会执行render造成性能损耗
	* 该生命周期函数有两个参数nextProps，nextState表示如果数据更新那么更新后的数据
	* 哪些参数会对子组件呈现有影响就用现在的数据与能更新后的数据做对比，如果没有区别，返回false不用重新render，如果为true，返回true表示需要重新render
	* 虽然render时虚拟DOM做比对，性能消耗不大，但是能省就省

shouldComponentUpdatecomponentDidMount组件被挂载到页面之后执行一次（页面第一次挂载后）componentWillUpdate
* 组件更新之前执行
* 在shouldComponentUpdate执行后，并且shouldComponentUpdate返回true才执行

componentWillUpdaterender
* 新的虚拟DOM，比对，更新DOM

rendercomponentDidUpdate
* 组件更新完成后执行

componentDidUpdateReact提升性能的点小总结
1. setState异步，几个合成一个，减少虚拟DOM比对次数
2. 函数.bind（this）写在constructor中
3. diff算法的同级比对和key值
4. shouldComponentUpdate，减少render次数，即减少虚拟DOM不必要的比对

ajax请求
* 放到哪个生命周期函数

	* 建议componentDidMount-只执行一次
	* 放在constructor，componentWillMount是可以的，但是会与以后用的更高级的东西起冲突
* 安装第三方模块帮助我们发送ajax请求----axios

工具Charles