React Native 从类组件到函数组件

1. 发展趋势

React Native社区中的趋势是朝向使用函数组件（Functional Components）和Hooks的方向发展，而不是使用类组件（Class Components）。

React Native自推出Hooks API以来，函数组件和Hooks的使用变得更加普遍和推荐。Hooks提供了更简洁、可读性更高的代码，并且在状态管理、生命周期等方面提供了更强大的功能。使用Hooks可以更容易地共享逻辑和状态逻辑，而无需使用类组件的复杂结构。

以下是一些关于为什么React Native社区更倾向于使用函数组件和Hooks的理由：

可读性和简洁性： 函数组件通常比类组件更短，更易于阅读和理解。Hooks的引入使得在函数组件中管理状态和副作用变得更为直观。

逻辑复用： Hooks使得逻辑的复用更加容易。你可以使用自定义Hooks将组件之间的逻辑进行抽象和共享，而不需要使用高阶组件或渲染属性。

更直观的副作用处理： 使用useEffect等Hooks来处理副作用相对于类组件中的生命周期方法更为直观。

更容易集成现代JavaScript特性： 使用函数组件和Hooks可以更容易地与ES6+和TypeScript等现代JavaScript特性集成。

更好的性能优化： Hooks使得React能够更好地进行性能优化，并且React Native的未来版本也更加注重性能。

2. Hooks vs Class

Hooks 提供了在函数组件中执行副作用和访问状态的能力。下面是一些常见的 Hooks 及其在类组件中对应的生命周期方法：

useState - setState:

函数组件： 使用 useState 来声明和更新状态。类组件： 使用 this.setState 来更新状态。

useEffect - componentDidMount, componentDidUpdate, componentWillUnmount:

函数组件： 使用 useEffect 来执行副作用，可以模拟生命周期方法的行为。类组件：

componentDidMount: 在组件挂载后调用。componentDidUpdate: 在组件更新后调用。componentWillUnmount: 在组件卸载前调用。

useEffect(() => {

// componentDidMount 和 componentDidUpdate 的逻辑

return () => {

// componentWillUnmount 的逻辑

};

}, [dependencies]);

useContext - contextType:

* 函数组件： 使用 `useContext` 来访问 React 上下文。

* 类组件： 使用 `contextType` 来访问 React 上下文。

useReducer - setState 和 this.setState:

函数组件： 使用 useReducer 来管理复杂状态逻辑。类组件： 可以使用 setState 或 this.setState，但 useReducer 更适合处理复杂状态逻辑。

useCallback - shouldComponentUpdate:

函数组件： 使用 useCallback 来记忆回调函数，以防止每次重新渲染时重新创建它。类组件： 在 shouldComponentUpdate 中进行优化，防止不必要的渲染。

useMemo - shouldComponentUpdate:

函数组件： 使用 useMemo 来记忆计算昂贵的计算结果。类组件： 在 shouldComponentUpdate 中进行优化，防止不必要的渲染。

这些是一些常见的 Hooks，它们为函数组件提供了类似于类组件生命周期方法的功能。使用 Hooks 可以更清晰地组织和重用逻辑。需要注意的是，使用 Hooks 时，每个 Hook 都是相互独立的，而类组件中的生命周期方法可能会涵盖多个生命周期阶段。

2.1 useState

useState 是 React Hooks 中用于在函数组件中添加状态的关键之一。它允许你在函数组件中添加和管理状态，而不需要使用类组件。useState 返回一个数组，其中包含两个元素：当前状态的值和一个更新状态的函数。

下面是 useState 的基本用法：

import React, { useState } from 'react';

function MyComponent() {

// 使用 useState 定义一个状态变量，初始值为 'initialValue'

const [state, setState] = useState('initialValue');

return (

);

}

export default MyComponent;

在上面的例子中，useState 被调用并传入初始状态 'initialValue'，返回的数组包含当前状态值 state 和更新状态的函数 setState。通过点击按钮，可以触发 setState 函数来更新状态。

useState 的基本用法包括：

定义状态： 调用 useState 来声明一个状态变量，并传入初始值。获取当前状态值： 使用返回的数组的第一个元素（例如，state）来获取当前状态的值。更新状态： 使用返回的数组的第二个元素（例如，setState）来更新状态。setState 函数接受新的状态值作为参数。

请注意，useState 可以在组件中多次调用，以添加多个状态变量。每个状态变量都有自己独立的 setState 函数。

import React, { useState } from 'react';

function MyComponent() {

const [count, setCount] = useState(0);

const [text, setText] = useState('');

return (

);

}

export default MyComponent;

在上面的例子中，MyComponent 组件有两个状态变量 count 和 text，每个都有自己的 setState 函数。

2.2 useEffect

useEffect 是 React Hooks 中用于处理副作用的关键之一。它在函数组件中提供了执行副作用的能力。useEffect 接受两个参数：

一个函数，包含需要执行的副作用代码。一个可选的依赖数组，用于指定在依赖项发生变化时才重新运行 useEffect。

import React, { useEffect } from 'react';

function MyComponent() {

// 在组件挂载后执行一次

useEffect(() => {

// 执行副作用的代码

// 清理函数（componentWillUnmount 的替代）

return () => {

// 在组件卸载前执行清理逻辑

};

}, [dependencies]); // 依赖项数组

return (

// 组件的 JSX

);

}

export default MyComponent;

Effect 函数： 第一个参数是一个函数，包含需要在每次渲染后执行的副作用代码。这个函数可以返回一个清理函数（cleanup function），用于在组件卸载时执行清理逻辑，类似于 componentWillUnmount。依赖项数组： 第二个参数是一个数组，包含影响副作用执行的变量。如果依赖项数组中的任何一个变量发生变化，useEffect 就会重新运行。如果省略依赖项数组，副作用将在每次组件渲染时都运行。 以下是一些 useEffect 的常见用法：

只在组件挂载时执行副作用：

useEffect(() => {

// 执行副作用的代码

return () => {

// 在组件卸载前执行清理逻辑

};

}, []);

在特定依赖项变化时执行副作用：

useEffect(() => {

// 执行副作用的代码

return () => {

// 在特定依赖项变化时执行清理逻辑

};

}, [dependency1, dependency2]);

执行异步操作：

useEffect(() => {

const fetchData = async () => {

try {

// 异步操作，比如从 API 获取数据

const result = await fetchDataFromApi();

// 处理结果

} catch (error) {

// 处理错误

}

};

fetchData();

return () => {

// 在组件卸载前执行清理逻辑

};

}, [dependency]);

useEffect 的使用取决于具体的需求，可以根据需要执行副作用，并确保在组件卸载前进行必要的清理。

2.3 useContext

useContext 是 React Hooks 中用于访问 React 上下文的钩子。它允许你在函数组件中订阅 React 上下文的值，而无需使用 Context.Consumer。

下面是 useContext 的基本用法：

创建上下文： 使用 React.createContext 创建一个上下文对象。在顶层组件提供上下文的值： 使用 Context.Provider 在组件树的某个位置提供上下文的值。在子组件中使用 useContext： 在需要访问上下文的子组件中使用 useContext 来获取上下文的值。

以下是一个简单的例子：

import React, { createContext, useContext } from 'react';

// 创建一个上下文对象

const MyContext = createContext();

// 在顶层组件提供上下文的值

function MyProvider({ children }) {

const contextValue = 'Hello from Context';

return (

{children}

);

}

// 在子组件中使用 useContext 获取上下文的值

function MyComponent() {

const contextValue = useContext(MyContext);

return

{contextValue}

}

// 在应用的顶层组件中使用 MyProvider 包裹子组件

function App() {

return (

);

}

export default App;

如果组件分别在不同的组件中, 则可以定义一个文件导出定义的 context:

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

2.4 useReducer

useReducer 是 React Hooks 中用于管理复杂状态逻辑的钩子。它提供了一种可预测的方式来更新状态，尤其适用于处理具有多个可能操作的状态。使用 useReducer 时，你需要定义一个 reducer 函数，该函数负责处理不同的操作，并返回新的状态。

下面是 useReducer 的基本用法：

定义 reducer 函数： 创建一个接受当前状态和操作的函数，根据操作类型返回新的状态。reducer 函数的格式为 (state, action) => newState。使用 useReducer： 在组件中调用 useReducer 并传入 reducer 函数和初始状态。得到当前状态和 dispatch 函数： useReducer 返回一个包含当前状态和 dispatch 函数的数组。dispatch 操作： 调用 dispatch 函数并传入一个操作对象，reducer 将根据操作类型来更新状态。 以下是一个简单的例子：

import React, { useReducer } from 'react';

// 定义 reducer 函数

const reducer = (state, action) => {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

default:

return state;

}

};

// 使用 useReducer

function Counter() {

const [state, dispatch] = useReducer(reducer, { count: 0 });

return (

);

}

export default Counter;

在上面的例子中，reducer 函数接收当前状态和操作，根据操作类型更新状态。useReducer 返回一个包含当前状态和 dispatch 函数的数组。通过调用 dispatch 函数，并传入包含 type 属性的操作对象，可以触发 reducer 来更新状态。

useReducer 还支持传入一个可选的初始化函数，用于计算初始状态，例如：

const initialState = { count: 0 };

const init = (initialState) => {

return { count: initialState.count * 2 };

};

const [state, dispatch] = useReducer(reducer, initialState, init);

在这个例子中，init 函数接收初始状态，并返回实际的初始状态。这可以是有用的，例如在初始状态需要基于某些计算的情况下。

使用 useReducer 的主要优势在于它使得状态逻辑更加模块化，特别是当有多个操作可能影响状态时。

2.5 useCallback

useCallback 是 React Hooks 中用于记忆回调函数的钩子。它的主要作用是在依赖不变的情况下，返回一个记忆化的回调函数，避免在每次渲染时创建新的回调函数。这有助于优化性能，特别是在子组件中使用时。

基本的使用方式如下：

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {

// 使用 useCallback 包裹回调函数

const memoizedCallback = useCallback(

() => {

// 回调函数的逻辑

console.log('Callback executed!');

},

// 依赖项数组

[/* dependencies */]

);

return (

Click me

);

}

export default MyComponent;

在上面的例子中，useCallback 接收两个参数：一个回调函数和一个依赖项数组。它返回一个记忆化后的回调函数 memoizedCallback。如果依赖项数组中的值没有发生变化，memoizedCallback 将保持相同的引用，从而避免在每次渲染时重新创建回调函数。

常见的用法包括：

避免子组件的不必要渲染： 在将回调函数传递给子组件时，使用 useCallback 避免子组件不必要地重新渲染。

const memoizedCallback = useCallback(

() => {

// 回调函数的逻辑

},

[/* dependencies */]

);

return ;

作为依赖项传递给其他 Hook： 在使用其他 Hook 时，将 useCallback 的记忆化回调函数作为依赖项传递。

useEffect(() => {

// 使用 memoizedCallback 作为依赖项

someHook(memoizedCallback);

}, [memoizedCallback]);

避免在依赖项变化时触发 effect： 在使用 useEffect 时，通过使用 useCallback 避免在依赖项变化时触发 effect。

useEffect(() => {

// 在 memoizedCallback 变化时执行 effect

}, [memoizedCallback]);

需要注意的是，过度使用 useCallback 可能会导致性能问题，因为每个记忆化的回调函数都需要额外的内存。因此，只在确实有性能问题或需要时使用 useCallback。

2.6 useMemo

useMemo 是 React Hooks 中用于记忆化计算结果的钩子。它接受一个计算函数和依赖项数组，并返回计算结果的记忆化版本。这有助于避免在每次渲染时重新计算耗时的操作，提高性能。

基本的使用方式如下：

import React, { useMemo } from 'react';

function MyComponent({ data }) {

// 使用 useMemo 记忆化计算结果

const memoizedResult = useMemo(

() => {

// 计算结果的逻辑

console.log('Computing result...');

return data.filter(item => item > 5);

},

// 依赖项数组

[data]

);

return (

);

}

export default MyComponent;

在上面的例子中，useMemo 接收两个参数：一个计算函数和一个依赖项数组。它返回一个记忆化后的计算结果 memoizedResult。如果依赖项数组中的值没有发生变化，memoizedResult 将保持相同的引用，从而避免在每次渲染时重新计算结果。

常见的用法包括：

优化渲染性能： 避免在每次渲染时都执行昂贵的计算，只在依赖项变化时重新计算。

const memoizedResult = useMemo(

() => {

// 昂贵的计算逻辑

},

[/* dependencies */]

);

记忆化函数： 当需要在每次渲染时都返回一个新的函数，但只有在依赖项变化时才创建新函数时，可以使用 useMemo 记忆化函数。

const memoizedFunction = useMemo(

() => {

return () => {

// 函数的逻辑

};

},

[/* dependencies */]

);

避免重复计算： 当某个计算结果仅在特定依赖项变化时才发生变化时，使用 useMemo 避免重复计算。

const memoizedResult = useMemo(

() => {

// 仅在特定依赖项变化时才计算结果

},

[specificDependency]

);

需要注意的是，过度使用 useMemo 可能会导致性能问题，因为每个记忆化的结果都需要额外的内存。因此，只在确实有性能问题或需要时使用 useMemo。

精彩文章

 您阅读本篇文章共花了：