React学习

https://www.bilibili.com/video/BV1Et41137Sb?p=36&spm_id_from=pageDriver

 

React 替代dom操作，更新数据就行

jqery只是简化语法

组件化

单向数据流

react为啥高效：  1. 虚拟dom 2.dom diff算法

啥是虚拟dom? 不总是直接操作dom, 最后一起操作dom

 

react  JSX是啥-->   js + xml；   xml可以自定义标签名——>组件标签， 标签名，属性是可以自定义的—>类似自定义component,小程序

Babel 库：  将jsx---> js

虚拟dom  轻量级， 真实的dom 重量级，很重

虚拟dom更新后不会重绘； 真实Dom 会重绘

debugger  前端断点

 

如何将数组数据转换成标签数组？ 使用数组的map()

 

 

组件

react  面向组件编程   组件标签———html标签；  为了区分html标签， 组件标签都要大写； html标签小写

ES6省代码; 语法糖，简洁语法

组件内调用新增函数，需要bind 

Component  里面的函数要绑定，才能在标签里面被调用

this.handleClick = this.handleClick.bind(this)

组件 setState 感觉类似小程序的setData

 

组件两种创建方式： 

1.  函数方式。 性能好，但是不能有状态，适用于简单的组件

2.component方式。 性能差，可以有状态，适用于复杂组件

 

 

默认属性值：

defultProps:

 

…的作用：

1. 打包  function myFunc(…parm);   调用  myFunc(1,2,3),  这里parm就是数组【1，2，3】
2. 解包， 可以解包数组，也可以解包字典对象

 

 

组件的三大属性：

1. state， 本地变量属性
2. props,  外界入参。除了是基本数据类型，也可以是函数
3. Refs:  标识组件内的元素，类似id

 前两条小程序组件也有

 

 

组件化开发的两个问题：

1. 数据保存在哪个组件内？ 答：如果组件自己用，那就在组件内； 如果多个组件都要用，那就在父组件上保存数据
2. 如何在子组件内改变父组件的状态？ 父组件内定义并实现改变数据的函数a， 子组件定义属性包含函数a, 子组件调用函数a修改父组件的状态。 注意：子组件不能直接改变父组件的状态

 

组件化编写的流程：

1. 拆分页面成组件
2. 实现静态组件
3. 实现动态组件  a. 实现初始化数据动态显示  b.实现交互功能

 

受控组件VS非受控组件   受控组件，代码量比较大，程序员手动处理响应事件

 

react 思想： 尽量少操作DOM， 使用受控组件比较好

 

定时器，内存泄漏，在合适的时候释放定时器

 

命名式编程  　　　　　　VS     声明式编程

Jqery(往组件内插入标签)    VS   React

 

重要的钩子： 生命周期函数

1. render 初始化渲染，或者更新渲染调用
2. ComponentDidMount  初始化定时器， 或者网络请求
3. ComponentWillUnmount  清理定时器
4. ComponentWillReceiveProps()  接收到新值的时候调用

 

回调，写箭头函数是比较好的选择， 可以不用写bind了

 

React 的style 写法：  {{display:’none’}}   注意none带引号，否则是取变量了

 

组件内如果不想绑定自定义方法，可以写箭头函数

 

组件间通信：

方式1， 使用props, 传递数据， 或者函数

方式2， 使用通知， 跟ios一样

 

 

路由链接（不发请求） VS 非路由链接（发送请求 a标签）

 

 

debugger  前端断点

 

 

TODO:

1. ES6语法！！！！学习， 
2. TS学习
3. form表单是啥
4. target 与currentTarget
5. settimeOut  与 setInterval

 

如何阻止事件的默认行为  event.preventDefault()

 

箭头函数，表示后面的就是返回值； 如果箭头后面带了大括号，大括号里面要写return