使用方法:
(1)先将ref存入变量
let el = useRef()
(2)再将变量与DOM节点进行绑定,通过ref的current属性来获取DOM节点
web开发
el.current
useRef的作用:
(1)可以绑定DOM组件
(2)可以获取组件渲染之前的数据
useEffect:在类组件中副作用通常在componentDidMount、componentDidUpdate、componentWillUnMount 生命周期函数中进行处理。
在函数组件中useEffect相当于以上三个钩子函数的集合体。
包含两个参数:第一参数是执行时的回调函数、第二个参数是依赖参数;并且回调函数,还有一个返回函数。
(1)依赖参数:是一个数组,数组中存放的是要依赖的数据,当这些数据更新时就会执行回调函数
(2)执行过程:
组件挂载–>执行副作用(回调函数)–>组件更新–>执行清理函数(返回函数)–>执行副作用(回调函数)–>组件准备卸载–>执行清理函数(返回函数) -->组件卸载
(1)只能在函数组件和自定义的Hooks中调用Hooks。类组件和普通函数不能使用Hooks
(2)只能在函数的第一层中调用Hooks。在函数中若使用了流程控制语句(if、for、while),在流程控制语句不能使用Hooks;若函数中定义了子函数,子函数中也不能使用Hooks
示例:自定义一个Hook,返回一个和滚动条位置实时同步的state
Redux:是一个状态管理的库。不是React内置的,是独立的JavaScript的状态容器,提供可预测的状态管理,在React中使用Redux,可以把所有的state集中到组件的顶部,能够灵活地将所有的state分发给所有组件。方便了开发者管理React中的状态,也方便了不同组件间的通信
(1)store:是一个数据容器,用来管理和保存整个项目的state。整个项目中只能有一个store
(2)state:是一个对象,在state中存储相应的数据,当开发者需要使用数据时,可以通过store提供的方法来获取state
(3)action:是一个通知命令,用于对state进行修改。通过store提供的方法可以发起action完成对state的修改
(1)action:本质是JavaScript对象,在action中包含一个字符串类型的type属性,作用是指定要对state进行何种操作。action会通过store将要进行的操作传给reducer函数,由reducer 函数完成对state的修改
action({type:‘add’,data:‘’})
(2)reducer:是一个纯函数。有两个参数state和action。该函数一定有一个返回值,是修改后的state
纯函数:
a、纯函数在执行过程中没有任何副作用。如定时器、网络请求
b、如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部状态或 数据的变化。
function reducer(state={ count:1},action){
switch(action.type){
case ‘ADD’:
return {count: state.count+1 }
case ‘SUB’:
return {count: state.count-1 }
}
return state;
}
(3)createStore:用于创建store,参数必须是reducer,reducer函数名可以自定义
(1)getState:用来获取state
(2)dispatch(action):派发action给reducer
(3)subscribe(listener):会注册一个监听器来监听state的变化。会返回一个注销监听器的方法
Redux的工作模式:发布-订阅模式