新手react错误记录

本人正在学习rn，以此记录新手时期react遇到过的一系列问题

1. 组件初始化时函数执行

在vue中 v2是写入Created生命周期中。vue3 setup直接写入

列如

<script setup>
import { ref } from "vue";
const num = ref(1)

const countAdd = () => {
  num.value++;
};
countAdd();
</script>

以上直接调用，但在react中如果与渲染有关没调用一次会从新渲染一次组件导出此函数无限次执行

 const conponents = () =>{
  const [num, setNum] = useState(1);
  const initDor = () => {
      setFileArr(num++);
  };
  initDor()
 return(...)
 }

错误写法

以下是正确写法

 const conponents = () =>{
  const [num, setNum] = useState(1);
  const initDor = () => {
      setFileArr(num++);
  };
  useEffect(() => {
    initDor();
  }, []);
 return(...)
 }

简单理解 useEffect(() => { .... }, []);为v2当中的Created生命周期

2. 组件刷新颗粒度

在vue中完全不考虑这个问题，在react中需要考虑useState的刷新成本 例如给rn应用封装一个Toast

根组件

function App(): React.JSX.Element {
  // const isDarkMode = useColorScheme() === 'dark';
  const [toastVisible, setToastVisible] = React.useState(false);

  const showToast = () => {
    console.log(21);

    setToastVisible(true);
    setTimeout(() => setToastVisible(false), 1000);
  };
  useEffect(() => {}, [toastVisible]);
  return (
    <Provider store={store}>
      <NavigationContainer theme={MyTheme}>
        <Router showToast={showToast} />
        <Toast visible={toastVisible} />
      </NavigationContainer>
    </Provider>
  );
}

Router组件中

export default function Router(prop: RouterProps) {
  const { showToast } = prop;
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="index"
        options={{ title: '首页', headerShown: false }}>
        {(prop: NativeStackScreenProps<ParamListBase>) => (
          <Index {...prop} showToast={showToast} />
        )}
      </Stack.Screen>
    </Stack.Navigator>
  );
}

在index组件

export const Index = (prop: IndexProp) => {
  console.log(prop, '这是index');

  const { navigation, showToast } = prop;

  useEffect(() => {
   
  }, []);
  return (
    <ScrollView>
      <Image style={style.headerImg} source={require('../assest/text.jpg')} />
      <TouchableHighlight
        style={[style.localFile, { left: 30 }]}
        activeOpacity={1}
        underlayColor="rgba(255, 255, 255, 0.45)"
        onPress={() => showToast()}>
        <Text style={style.localFileFont}>最近</Text>
      </TouchableHighlight>
     
      <View style={style.fillBox} />
    
      <Button title="发起请求" onPress={http} /> */}

     
      
    </ScrollView>
  );
};

当调用showToast()方法会引起整个组件的刷新，原因应该是挂在于app根组件，在根组件使用了useState

3.监听事件写在函数组件外头，如果响应式数据更新导致函数从新执行会让监听事件重复注册导致卡顿

const Box = () => {
const [data.setData] = useState()
  xxx.addEventListener('click',fn) //错误 如果data值变化导致Box函数组件从新执行从而导致事件重复注册
  return (
    <View >
    {data}

    </View>
  );
};


//正确做法写入useEffect中 这样不会导致重复注册
const Box = () => {
const [data.setData] = useState()
    useEffect(()=>{
          xxx.addEventListener('click',fn) 
    })
  return (
    <View >
    {data}

    </View>
  );
};