reactjs - 如果从 react 钩子(Hook)中的多个源获取，如何防止重新渲染？

Question

我在 React Native 中使用 react hooks。我的问题是 useState 初始化状态的函数会导致重新渲染。所以如果我设置如下状态

    const [A, setA] = useState(false);
    const [B, setB] = useState(false);
    const [C, setA] = useState(false);

    // ...

    const testFunc = () => {
        setA(true);
        setB(true);
        setC(true);
    }

<小时/>

已编辑我认为例子是错误的。这是另一个例子。

const useFetch(coords) {
    const [example, setExample] = useState([])
    const [checker, setChecker] = useState(false);

    const fetchData = () => {
        axios.fetch(`url+${coords.latitue}+${coords.longitude}`).then(){
            setExample(res.data());
            setChecker(true);
        }
    }

    useEffect(() => {
        fetchData();
    }, [coords])

    return example;
}

const useLocation = () => {
    ...
    return coords;
}

const App = () => {
    const coords = useLocation();
    const example = useFetch(coords); // example is undefined.
    const [data, setData] = useState(example); // data is undefined.
}

<小时/>

它会导致与我使用 set 函数一样多的重新渲染。这是自然的事吗？如果我不想重新渲染，不能多次使用set函数吗？

Answer 1

你不能以简单的方式做到这一点。我将向您推荐两种解决方案。

解决方案 1:将状态合并到一个对象中。

const [value, setValue] = useState({A: false, B: false, C: false});

// ...

const testFunc = () => {
    setValue({A: true, B: true, C: true});
}

解决方案 2:另一个解决方案是 useReducer。

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {A: false, B: false, C: false}
);

// ...

const testFunc = () => {
    setState({A: true, B: true, C: true});
}

在这里我实现了你的另一个例子:https://stackblitz.com/edit/react-usestate-wcjshg

希望这对您有帮助!