RN开发搬砖经验之—在React 函数式组件别一把梭useState得考虑下useRef

两者的使用场景

useState和useRef都是React的Hooks，但它们有不同的使用场景和目的。

1、useState主要用于在函数组件中管理状态。当状态发生变化时，组件会重新渲染。它是异步的，同一个函数内设置的，不能实时获取到最新的值。useState的使用场景通常包括需要在状态改变时重新渲染视图的场景。例如，你可以使用useState来创建一个计数器，当计数器的值变化时，整个组件会重新渲染，显示新的计数器值。

2、useRef则主要用于访问DOM元素或者保存对可变对象的引用，这种引用不会触发组件重新渲染。useRef返回的可变对象在组件的整个生命周期内保持不变，且设置的值是同步的，同一个函数内设置的，能实时获取到最新的值。useRef的一个常见用例是将ref对象绑定到DOM元素上，以便在必要时访问DOM元素的属性和方法。此外，useRef也可以用于保存可变对象的引用，而不影响视图的更新。

总的来说，useState主要用于数据的变化和视图的更新，而useRef则主要用于访问和交互不会触发渲染的对象。

需要注意的是，ref.current不可以作为其他hooks（如useMemo, useCallback, useEffect）的依赖项，因为ref.current的值发生变更并不会造成re-render，Reactjs并不会跟踪ref.current的变化。同时，变量（组件内）在每次组件重新渲染的时候都会被重新进行赋值为初始值，所以如果你想要保留之前操作的状态的话就不要使用变量。

比如加列表分页加载时分页变量，其实是可以用useRef来替换useState的，特别是当你的分页变量在更改时，就需要访问（同步获取更新后的值）且分页变量不希望触发组件重新渲染（多数情况下分页变量是不需要触发重新渲染的）这种场景时，就特别需要useRef了。
使用useState的示例如下：

import React, { useState, useEffect } from 'react';  
import { FlatList, View, Text, ActivityIndicator } from 'react-native';  const PageSize = 10; // 每页的项目数量  const MyFlatList = () => {  const [loading, setLoading] = useState(false);  const [dataList, setDataList] = useState([]);  const [hasMore, setHasMore] = useState(true);  const [page, setPage] = useState(1);  // 加载更多数据的函数  const loadMoreData = async () => {  if (loading || !hasMore) return;  setLoading(true);  // 模拟网络请求获取下一页数据  const newData = await fetchData(page);  // 更新数据列表和页面  setDataList(prevData => [...prevData, ...newData]);  setPage(prevPage => prevPage + 1);  // 根据返回的数据判断是否还有更多页面  setHasMore(newData.length === PageSize);  setLoading(false);  };  // 模拟从服务器获取数据的函数  const fetchData = async (page) => {  // 假设这是从服务器获取的数据  // 在实际应用中，你会发送一个网络请求到服务器，并处理响应  const start = (page - 1) * PageSize + 1;  const end = start + PageSize;  return Array.from({ length: PageSize }, (_, i) => `Item ${start + i}`);  };  return (  <FlatList  data={dataList}  keyExtractor={item => item.toString()}  renderItem={({ item }) => <Text>{item}</Text>}  onEndReached={loadMoreData}  onEndReachedThreshold={0.5}  ListFooterComponent={  loading ? (  <View style={{ paddingVertical: 20 }}>  <ActivityIndicator size="large" />  </View>  ) : null  }  />  );  
};  export default MyFlatList;

改成分页变量用useRef的示例如下：

import React, { useState, useEffect, useRef } from 'react';  
import { FlatList, View, Text, ActivityIndicator } from 'react-native';  const PageSize = 10; // 每页的项目数量  const MyFlatList = () => {  const [loading, setLoading] = useState(false);  const [dataList, setDataList] = useState([]);  const [hasMore, setHasMore] = useState(true);  const pageRef = useRef(1); // 使用 ref 来存储当前的页码  // 加载更多数据的函数  const loadMoreData = async () => {  if (loading || !hasMore) return;  setLoading(true);  // 模拟网络请求获取下一页数据  const currentPage = pageRef.current;  const newData = await fetchData(currentPage);  // 更新数据列表和页码  setDataList(prevData => [...prevData, ...newData]);  pageRef.current = currentPage + 1; // 更新 ref 中的页码  // 根据返回的数据判断是否还有更多页面  setHasMore(newData.length === PageSize);  setLoading(false);  };  // 模拟从服务器获取数据的函数  const fetchData = async (page) => {  // 假设这是从服务器获取的数据  // 在实际应用中，你会发送一个网络请求到服务器，并处理响应  const start = (page - 1) * PageSize + 1;  const end = start + PageSize;  return Array.from({ length: PageSize }, (_, i) => `Item ${start + i}`);  };  return (  <FlatList  data={dataList}  keyExtractor={item => item.toString()}  renderItem={({ item }) => <Text>{item}</Text>}  onEndReached={loadMoreData}  onEndReachedThreshold={0.5}  ListFooterComponent={  loading ? (  <View style={{ paddingVertical: 20 }}>  <ActivityIndicator size="large" />  </View>  ) : null  }  />  );  
};  export default MyFlatList;

使用useRef

类组件

代码示例如下：

import React from 'react';  class MyComponent extends React.Component {  constructor(props) {  super(props);  // 初始化实例属性来模拟 ref  this.myRef = React.createRef();  }  componentDidMount() {  // 类似于 useEffect，在组件挂载后访问 DOM 元素  const node = this.myRef.current;  if (node) {  console.log(node); // 输出 DOM 元素  }  }  render() {  return (  <div ref={this.myRef}>  Hello, World!  </div>  );  }  
}  export default MyComponent;

函数式组件

代码示例如下：

import React, { useRef, useEffect } from 'react';  function MyFunctionalComponent() {  // 创建一个 ref 来保存对 DOM 元素的引用  const myRef = useRef(null);  // 使用 useEffect 在组件挂载后和卸载前执行操作  useEffect(() => {  // 组件挂载后  const node = myRef.current;  if (node) {  console.log(node); // 输出 DOM 元素  // 可以执行其他操作，比如设置焦点、监听事件等  }  // 返回一个清理函数，在组件卸载前执行  return () => {  // 组件卸载前，可以执行清理操作，比如移除事件监听器  };  }, []); // 注意依赖项数组为空，确保只在挂载和卸载时运行  return (  <div ref={myRef}>  Click me  </div>  );  
}  export default MyFunctionalComponent;