如果您是 React Native 或 React 新手，您一定会遇到过“state”和“props”这两个词。了解这两者对于开发动态且适应性强的移动应用程序至关重要。我们将在这篇博客文章中深入探讨 state 和 props，检查它们的差异，并学习如何有效处理 React Native 应用程序中的数据流。

什么是 State 和 Props？

状态

State 是一个内置对象，允许组件创建和管理自己的数据。它保存的信息可能会在组件的生命周期中发生变化。每当状态发生变化时，组件就会重新渲染以反映这些变化。

• Mutable： 可以使用 setState（在类组件中）或 useState 钩子（在功能组件中）更改状态。
• 组件本地： 状态是完全封装的并且是组件本地的。
• 触发重新渲染：更新状态会导致组件重新渲染。

道具

Props 是属性的缩写，是只读组件。它们是传递到组件中的外部参数，类似于将参数传递到函数中的方式。

• 不可变： Props 不能被接收它们的组件修改。
• Passed Down from Parent： Props 从父组件传递到子组件。
• 用于配置：它们配置组件并从外部控制其行为。

理解差异

了解何时使用状态以及何时使用 props 是管理应用程序中数据流的关键。

为什么它们很重要？

• 状态对于需要跟踪和响应用户输入、API 响应或其他动态数据的组件至关重要。
• Props 允许组件通过接受动态数据和函数来重用，使您的代码更加模块化和可维护。

有效管理数据流

有效的数据流管理可确保您的应用程序行为可预测，并且更易于调试和维护。

1.单向数据流

React Native 使用单向数据流。数据通过 props 从父组件移动到子组件。这使得数据流更容易理解和调试。

2.提升状态

当多个组件需要访问同一条数据时，最好将状态提升到最近的共同祖先。这样，共享状态就可以通过 props 传递下去。

3.使用回调进行子与父的通信

为了允许子组件与父组件通信，您可以将函数（回调）作为 props 传递。然后子组件可以调用此函数将数据发送回父组件。

示例

让我们看一些代码示例来说明这些概念。

示例 1：使用 Props

父组件（App.js）：

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
  );
};

export default App;

子组件（Greeting.js）：

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

解释：

• App 组件将 name 属性传递给 Greeting 组件。
• Greeting 组件接收 props 并使用 props.name 来显示个性化消息。

示例 2：使用状态

计数器组件（Counter.js）：

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

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

  return (
    You clicked {count} times setCount(count   1)} />
    
  );
};

export default Counter;

解释：

• 我们使用 useState 钩子将 count 初始化为 0。
• setCount函数更新状态。
• 按下按钮时，计数递增，并且组件重新渲染以显示新计数。

示例 3：提升状态

父组件（TemperatureConverter.js）：

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
  );
};

export default TemperatureConverter;

子组件（TemperatureInput.js）：

import React from 'react';
import { TextInput, Text } from 'react-native';

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:>
  );
};

export default TemperatureInput;

解释：

• 共享状态温度和标度被提升到TemperatureConverter组件。
• TemperatureInput 组件接收 props 并通过回调将更改传达回父级。

最佳实践

1.尽可能保持组件无状态

无状态组件更容易测试和调试。使用 props 将数据传递给它们。

2.最小化状态性

仅在必要时使用状态。太多有状态组件会使您的应用程序更难管理。

3.避免直接状态突变

永远不要直接改变状态。始终使用 setState 或 useState.

4.使用 PropTypes 进行类型检查

使用 PropTypes 记录传递给组件的预期属性类型。

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5.利用 Context API 获取全局状态

对于需要由不同嵌套级别的多个组件访问的数据，请考虑使用 Context API。

要避免的常见错误

• 直接改变状态：

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• 使用 Props 直接修改父状态：

子组件不应尝试直接修改 props 或父状态。使用回调。

结论

理解并有效管理状态和属性对于任何 React Native 开发人员来说都是至关重要的。通过掌握这些概念，您将能够构建不仅实用而且干净、高效且可维护的应用程序。

记住：

• 状态适用于随时间变化的数据，并在组件内进行管理。
• Props 用于在组件树中传递数据和函数。

花时间在项目中实践这些概念，您将看到开发工作流程的显着改进。