JS基础点&react hooks

JS基础

JS是一种运行在客户端的脚本语言

CMAScript -JavaScript核心
定义了JavaScript的语法规范

BOM-浏览器对象模型
DOM-文档对象模型

变量命名：

• 由字母、数字、下换线、$符号组成，不能以数字开头； 不
• 能用保留字和关键字；
• 区分大小写；
• 遵循驼峰命名法：首字母小写，后面单词的首字母需要大写。

类型转换：
Boolean（）
0：空字符串 null、 undefined NaN 会转换成 false
其他会转换为true
隐式转换：
转换为true： 非空字符串 非0数字 true 任何对象
转换为false： 空字符串“ ” 0 false null undefined

一元运算符：
前置++：先加1，再参与运算
后置++：先参与运算，再加1
–同理

== 与 ===的区别：
== 只比较值
===类型和值同时比较

运算符优先级：

1. （）优先级最高
2. 一元运算符 ++ – ！
3. 算数运算符 先* / % 后+ -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先 && 后 ||
7. 赋值运算符

匿名函数：
没有名字的函数
使用：将匿名函数赋值给一个变量，就可以通过变量进行调用
函数自调用
----->自调用函数 (function(){})()
作用：（匿名函数自调用）防止全局变量污染

词法作用域：
变量的作用域是在定义的时候决定的而不是执行的时候决定的
作用域链：
只有函数可以制造作用域链
凡是代码中有函数，那么这个函数就构成另一个作用域

JavaScript解析器执行代码时：
预解析过程：

• 将变量声明提升到作用域的最前面，只会提升声明，不赋值
• 将函数声明提升到作用域的最前面，只会提升声明，不提升调用
• 先提升var，再提升function

构造函数：
用于创建一类对象，首字母要大写；构造函数和 new一起使用

在执行构造函数时：

1. new 会在内存中创建一个新的空对象
2. new 会让this指向这个新对象
3. 执行构造函数 目的：给这个新对象添加属性和方法
4. new会返回这个对象

简单类型和复杂类型的区别：
基本类型-值类型：
简单数据类型 基本数据类型
在存储的时候，变量中存储的是值本身，因此叫做值类型

引用类型：
复杂数据类型
在存储的时候，变量中存储的是地址（引用）

浏览器对象、自定义对象、浏览器对象
内置对象： Math/Array/Number/String …
对象是带有属性和方法的特殊数据类型

react hooks

1.setSate

const [count,setCount]=useState(0);  数
const [obj,setObj]=useState({name:"zhangsan"});  对象
const [arr,setArr]=useState([1,2,3,4,5]);  数组
const [func,setFunc]=useState(()=>{    函数  ：返回的是什么就按照什么实使用
    return {pages:4,
            name:"小花"};
});

2.useEffect

• 1.componentDidMount、componentDidUpdate、

  componentWillUnmount

• 2.副作用（DOM操作、数据请求、组件更新）

• 3.useEffect为啥在组件函数内部执行？ 可以回去props和state，采用了闭包的形式

• 4.无阻塞更新哦；

• 5.useEffect（回调函数，数组（可以不写））；

• 6.多个useEffect useEffect（()=>{

},[]）; 当第二个为空数组的时候，表示不监听， 为空的时候，表示全部监听， 为某个特定的值[a]的时候，表示监听[a]

3.useRef
返回一个可变的ref对象，其·current属性被初始化为传入的参数(initialValue) 返回的ref对象在组件的整个生命周期内保持不变
const input=useRef(null); //获取输入的数据
console.log(input.current.value);

const save=useRef(“1234”);
保存数据：
save.current=input.current.value;

4.useContext createContext
用于父组件向子组件传值
父组件：

子组件：

使用的时候：

5.useMemo
‘shouldComponentUpdate’类似的作用，在渲染的过程中避免重复渲染的问题；
当状态或者父组件传来的属性发生变化时，更新组件。

1.‘useMemo’就是用的‘memoization’来提高性能；
2.‘memoization’是JavaScript中的一种缓存技术
如果有CUP密集的操作，我们可以通过将初始操作的结果存储在缓存中来优化使用，如果操作必然会再次执行，我们将不再麻烦再次使用CPU，因为相同的结果存储在某个地方，只能简单地返回结果。
这个是以空间换速度，所以最好是确定是否值得这么做，有些场景很有使用的必要
‘useMemo()’是一个函数，有两个参数，第一个参数是函数，第二个参数是数组；
‘useMemo(()=>{},[默认可以不写])’
useMemo和useEffect执行的时间不同，useEffect是在componentDidMount以后执行的，而useMemo是在组件渲染的过程中执行的。

存在一个小bug：就是缓存的问题。。。。。

6.useCallback
作用:避免组件重复渲染，提高性能（useMemo）
可以控制组件什么时候需要更新；
童谣用到了缓存技术，与useMemo不同的是：
useCallback缓存的是个函数，可以执行

useCallback()有两个参数，第一个参数是个函数，第二个参数是个数组
useCallback(()=>{},[可以不写])
Const callback=useCallback(()=>{},[]);
Callback()是个函数–可以直接callback()执行
也存在一个小的bug：由于缓存的问题

7.useImperativeHandle
useImperativeHandle 可以在使用ref 的时候自定义暴露给父组件的实例。在大多数情况下，应当避免使用ref这样的userImperativeHandle 应和forwardRef一起

useImperativeHandle（ref(传递来的)，()=>{},[]）

8.useLayoutEffect
和useEffect作用一样，在组件生成的过程中，可以做一些操作
不同点在：
1.执行的时间不同，useEffect是在componentDidMount以后执行，useLayoutEffect是在浏览器执行绘制之前执行，（会阻塞组件的挂载，慎用！！！）

9.自定义hooks
和普通的函数在本质上没有却别，就是做一些函数的封装，方便使用
注意：

• 1.自定义hook，必须以use开头；
• 2.自定义hook，可以使用这些hooks(useState,useEffect…)来封装

10.useReducer

• 1.userReducer()和redux中的reducer是一样的，就是个函数
• 2.userReducer()是个函数，有3个参数，第一个：reducer；第二个：初始值；第三个：init；
• 3.userReducer()返回值是个数组，第一个是：state;第二个是：dispatch；
• 4.Const [state,dispatch] = useReducer(reducer,初始值);