react Hooks

Jayson柴2024-05-11 12:10

首次渲染执行useState，获取初始值，之后重新渲染，获取的是新值，不是初始值（hooks有缓存）；

这也是Hooks顺序不能变化，不能使用if语句包裹的原因；Hooks内部维护一个有序链表，用来存储状态，如果hooks顺序变化，获取状态值时可能会出错。

1 useState

javascript 复制代码

const user = { name: 'aa', age: 14 }
[user, setUser] = useState(user)

user.name = 'lisi';
setUser(user}

setUser(user} 无法更改数据，更新前后的user对象，原值和新值的引用相同，react认为值没有变化，不会重新渲染；

解决方案：setUser({...user})，setUser(Object.assign({}, user))

强制重新渲染：利用引用不同 console.log({} === {}); // false

javascript 复制代码

const [, forceUpdate] = useState({});
const onRefresh = () => forceUpdate({}); // 放置一个新的引用

<button onClick={onRefresh}>组件强制重新渲染</button>

2 useRef

解决问题：

获取DOM元素或子组件的实例对象；
存储渲染周期之间共享的数据 ；（比如：上次渲染的数据和本次渲染的数据）
注意：修改ref不会重新渲染，useEffect也不会监听到ref变化

javascript 复制代码

const time = useRef(Date.now());
time.current = Date.now(); // 修改ref不会重新渲染；
console.log(time.current) // 但是打印结果会更新

useEffect(() => {
	console.log('time值发生了变化', time.current)
}, [time.current]);  // useEffect也不会监听到ref变化

javascript 复制代码

const iptRef = useRef<HTMLInputElement>(null);
const getFocus = () => {
  iptRef.current?.focus();
}

<input type="text" ref={iptRef} />
<button onClick={getFocus}>点击获取焦点</button>

组件第一次渲染会调用useRef、之后渲染不会调用useRef

javascript 复制代码

const { count, setCount } = useState(0);
const preCountRef = useRef();
const add = () => {
  setCount(pre => pre + 1);
  preCountRef.current = count;
}

<h1>新值是{count}，旧值是{preCountRef.current}</h1>

ref更改组件不会重新渲染