reactjs - React Native 在模态打开/关闭时重新呈现整个组件

Question

我的问题

我使用 Array.map 方法呈现一个简单项目(数字或字符串)的列表。我使用 Modal 添加/更新项目。但是，每次打开或关闭模式都会使 react 重新渲染整个数组，即使数组保持未修改也是如此。我觉得这是预期的行为。

问题

1. 是否可以在打开或关闭模式时不重新渲染整个组件？
2. 在不重新呈现整个列表的情况下添加/更新数组中的新项目的常用方法是什么？

谢谢大家

最小代码示例

/* Console output:
 * ---------------
 * ROOT: render component
 * -> ITEM: render 1
 * -> ITEM: render 2
 * -> ITEM: render 3 (not in map)
 * ROOT: open modal
 * ROOT: render component
 * -> ITEM: render 1
 * -> ITEM: render 2
 * -> ITEM: render 3 (not in map)
 * MODAL: close Modal
 * ROOT: render component
 * -> ITEM: render 1
 * -> ITEM: render 2
 * -> ITEM: render 3 (not in map)
*/
import * as React from 'react';
import {useState} from 'react';
import {View, Text, Modal, Pressable, StyleSheet} from 'react-native';

const items = [1, 2];

const Item = ({el}) => {
  console.log(`-> ITEM: render ${el}`);
  return <Text>Item: {el}</Text>;
};

const Testing = () => {
  const [visible, setVisible] = useState(false);
  const openModal = () => {
    console.log('ROOT: open modal');
    setVisible(true);
  };

  console.log("ROOT: render component");

  return (
    <View style={styles.wrapper}>

      {/* Render simple list */}
      <Text style={styles.header}>All items:</Text>
      {items.map(el => (
        <Item el={el} key={el} />
      ))}
      <Item el={'3 (not in map)'} />

      {/* Button to open modal */}
      <Pressable style={styles.button} onPress={openModal}>
        <Text style={styles.header}>Tap me to open modal</Text>
      </Pressable>

      {/*The Modal*/}
      <Modal
        animationType="slide"
        transparent={false}
        visible={visible}
        onRequestClose={() => {
          console.log('MODAL: close Modal');
          setVisible(false);
        }}>
        <Text style={styles.header}>No content here...</Text>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    borderRadius: 5,
    backgroundColor: '#0aa',
    marginVertical: 10,
    padding: 10,
  },
  header: {
    fontSize: 18,
    fontWeight: '700',
  },
});

export default Testing;

Answer 1

我今天学到了什么

一旦我们创建了一个组件，React 就会跟踪它的状态并在状态发生变化时执行重新渲染。重新渲染包括组件的所有子项。因此，我可以回答我的问题。

问题 1 的答案

是的。我们需要 visible 不处于我们不想重新呈现的组件的状态。为实现这一点，Modal 应该与我们的成为 Modal 父级的组件分开实现。

同时，我们希望父级可以使设置的模态可见。在这里，一个对我来说很新的 React Hook 发挥了作用:useImperativeHandle。

工作流程如下。父级使用包装 Modal 组件的 forwardRef 函数将引用 ref 转发给 Modal。然后，Modal 将 ref 声明为父级可以使用的处理程序。此声明和可用的属性是通过 useImperativeHandler Hook 提供的。就是这样。

但是请注意，在大多数情况下应避免使用 refs 的命令式代码，如 official docs状态。

下面是代码片段，作为我的纪念。此时不重新渲染模态打开/关闭!

/* Console output:
 * ---------------
 * ROOT: render component
 * -> ITEM: render 1
 * -> ITEM: render 2
 * -> ITEM: render 3 (not in map)
 * ROOT: open modal
 * MODAL: openMe called from parent component via ref
 * MODAL: close Modal
 */

//
// Modal component
//
const _MyModal = (props, ref) => {
  const [visible, setVisible] = useState(false);

  const openMe = () => {
    console.log('MODAL: openMe called from parent component via ref');
    setVisible(true);
  };

  useImperativeHandle(ref, () => ({publicHandler: openMe}}), [openMe]));

  return (<Modal>...</Modal>);
};

const MyModal = forwardRef(_MyModal);

//
// Testing component
//
const Testing = () => {
  const modalRef = useRef(null);

  const openModal = () => {
    console.log('ROOT: open modal');
    modalRef.current.publicHandler();
  };
  
  // Rest of code without <Modal> tag
}

使用 redux 回答问题 1

如果你使用redux，则不需要useImperativeHandle hook。只需将 Modal 组件连接到 store 以共享 visible 和 action creator actSetVisible，同时连接父组件以仅共享此 action creator actSetVisible 。一切都与上图类似。

但是，如果您确实想使用 useImperativeHandle，您应该将 redux 指向在将 Modal 连接到存储时转发引用的事实:

const MyModal = connect(mapS2P, mapD2P, null, {forwardRef: true}))(forwardRef(_MyModal));

问题2的答案

上面的建议展示了如何在模式打开或关闭时摆脱过度的重新渲染。我的第二个问题暗示我在 react 中做了一些新的错误，因为我真的是这里的新手。因此，以我的愚见，使用模态是向列表添加元素的好方法。在我的例子中，它是一个组合组件数组，而不是一个简单字符串数组，重新呈现是一个关键问题。

后记

活一个世纪，学一个世纪，你会傻到死。希望这对任何人都有帮助。