hooks
注：函数组件的每一次渲染或者更新，都是函数重新执行，产生一个新的私有上下文【也就是内部的代码需要重新执行一次】
useState()
-
作用：在函数组件中使用状态，修改状态值，更新视图
- 参数1：
initiaValue(初始值) - 参数2：修改初始值的方法
- 参数1：
useState()自带了性能优化，每一次修改状态值的时候会拿新的值和之前的值做对比【基于 Object. is()】。如果两个值是一样的就不会修改状态，也不会让页面更新【类似于PureComponent中的shouldComponentUpdate】惰性处理：把父组件传递进来的值经过处理作为初始值，只有第一次渲染组件处理这些逻辑，这样就可以将这些逻辑写入
useState为函数的参数中，并return出去。
useState(()=>{ ...写这里... return XXX})
useEffect()
- 作用：在函数组件中使用生命周期函数
-
useEffect(()=>{})；没设置依赖
在第一次渲染完毕后执行回调函数，等价于componentDidMount，在组件每次更新的时也会执行回调函数，等价于componentDidUpdate -
useEffect(()=>{},[])；设置了空依赖
只有第一次渲染完毕后才会执行回调函数，每一次视图更新后，不再执行。类似于componentDidMount -
useEffect(()=>{},[num,…])；设置一个或多个依赖
第一次渲染完毕后会执行回调函数。
当依赖的状态(一个或多个)发生变化，也会执行。
依赖的状态没有变化,在组件更新的时候，不会执行。
-
useEffect和useLayoutEffect的区别?
- 在两者的callback回调函数中，都可以获取
DOM元素；是因为真实的DOM对象已经创建了，区别是浏览器是否渲染。-
useEffect是异步执行的，需要等到浏览器将所有变化渲染后才会被执行，本次更新完成后再开启下一个任务。 -
useLayoutEffect是同步，简单说是在浏览器将所有变化渲染到屏幕之前执行的。
-
REF？
- 作用：
- 赋值给标签：获取
DOM元素 - 赋值给类子组件：可以获取子组件实例【基于实例调用子组件中的属性和方法】
- 赋值给函数子组件：报错【需要配合
React.forwardRef实现REF转发，获取子组件中的某一个DOM元素】
- 赋值给标签：获取
- 方法：
- 在类组件和函数组件中都可以通过给dom添加
ref={ref=>this.curRef=ref}来获取DOM元素，函数组件没有this，所以在函数组件中需要删除this来使用(在函数组件中不推荐) - 或者使用
React.createRef()来获取dom元素 - 使用
useRef()let boxRef = useRef(null) console.log(boxRef)
- 在类组件和函数组件中都可以通过给dom添加
useRef()和React.createRef()的区别?
-
useRef在每一次组件更新, 再次执行useRef方法的时候，不会创建新的ref对象，获取到的还是第一次创建的ref对象(函数组件推荐使用) -
createRef在每一次组件更新的时候，会创建一个新的ref对象，比较浪费性能(类组件推荐使用)
useImperativeHandle(ref,()=>{]})
- 作用：基于
React.forwardRef()实现转发的同时，获取函数子组件内部的状态或方法- 在回调函数的里面return出去要被父组件获取的方法和属性
useMemo(()=>{},[])
- 作用：回调函数执行的时候会返回一个结果，
useMemo具备"计算缓存”，在依赖的状态值没有变化、回调函数没有触发执行的时候，这个结果获取的是上一次计算的结果- 参数1：回调函数
- 参数2：依赖
// 示例
import React , { useMemo } from "react";
import PropTypes from "prop-types";
const VoteMain = function VoteMain(props){
let { supNum,oppNum } = props; // 基于useMemo实现复杂逻辑的计算缓存
let ratio = useMemo(() =>
let ratio ='--'
total = supNum + oppNum;
if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
return ratio;
}，[supNum,oppNum]);
return <div className="main">
<p>支持人数: {supNum}人</p>
<p>反对人数: {oppNum}人</p>
<p>支持比率: {ratio}</p>
</div>;
}
* 属性规则校验 */
VoteMain.defaultProps = {
supNum:0，
oppNum:0
}
VoteMain.propTypes = {
supNum:PropTypes.number,
oppNum:PropTypes.number
}
useCallback(()=>{},[])
- 作用：回调函数执行的时候会返回一个结果，之后每次组件更新，都判断依赖的状态是否改变。如果改变就重新创建函数，并返回新的返回值。如果没有更新就不会重新创建函数。【简单来说，
useCallback可以始终拿到第一次回调函数返回的结果(不要乱用)】 - 常见于：父子组件嵌套，父组件修改状态，并不影响子组件，这个时候子组件没必要更新，这个时候需要将父组件引入的子组件用
useCallback包一下，子组件则需要用React.memo()包一下- 参数1：回调函数
- 参数2：依赖
自定义hook
- 自定义hook函数，可以将某些组件逻辑提取到可重用的函数中，建议命名规则
useXxx - 需求：react提供的
useState方法不能修改对象，我们根据useState()方法自己封装一个支持修改对象的hook【usePartialState】
const usePartialState = function usePartialState(initiaValue) {
let [state, setState] = useState(initiaValue);
const setPartial = function setPartial(partialState) {
setState({
...state,
...partialState,
});
};
return [state, setPartial];
};
export default function Hooks() {
const [state, setPartial] = usePartialState({
x: 1,
y: 1,
});
const handle = (type) => {
if (type === "addX") {
setPartial({
x: state.x + 1,
});
return;
}
setPartial({
y: state.y + 1,
});
};
return (
<div style={{ border: "1px solid #666", padding: "10px 20px", width: 200 }}>
<div>
<p>x:{state.x}</p>
<p>y:{state.y}</p>
</div>
<Button onClick={handle.bind(null, "addX")}>设置x</Button>
<Button onClick={handle.bind(null, "addY")}>设置y</Button>
</div>
);
}
