在功能组件中存储非状态变量 [英] Storing non-state variables in functional components

问题描述

下面是两个几乎做同样事情的 React 组件.一个是函数；另一个是一个类.每个组件都有一个 Animated.Value 和一个异步侦听器，它在更改时更新 _foo.我需要能够访问功能组件中的 _foo，就像我在经典组件中使用 this._foo 一样.

Below are two React Components that do almost the same thing. One is a function; the other is a class. Each Component has an Animated.Value with an async listener that updates _foo on change. I need to be able to access _foo in the functional component like I do with this._foo in the classical component.

• FunctionalBar 不应在全局范围内包含 _foo，以防有多个 FunctionalBar.
• FunctionalBar 不能在函数作用域中包含 _foo，因为每次 FunctionalBar 渲染时都会重新初始化 _foo._foo 也不应该处于 state 中，因为当 _foo 改变时组件不需要渲染.
• ClassBar 没有这个问题，因为它在组件的整个生命周期中都会在 this 上初始化 _foo.

• FunctionalBar should not have _foo in the global scope in case there are more than one FunctionalBar.
• FunctionalBar cannot have _foo in the function scope because _foo is reinitialized every time the FunctionalBar renders. _foo also should not be in state because the component does not need to render when _foo changes.
• ClassBar does not have this problem because it keeps _foo initialized on this throughout the entire life of the Component.

如何在 FunctionalBar 的整个生命周期内保持 _foo 初始化而不将其置于全局范围内?

How do I keep _foo initialized throughout the life of FunctionalBar without putting it in the global scope?

import React from 'react';
import { Animated, View } from 'react-native';

var _foo = 0;

function FunctionalBar(props) {

  const foo = new Animated.Value(0);

  _onChangeFoo({ value }) {
    _foo = value;
  }

  function showFoo() {
    let anim = Animated.timing(foo, { toValue: 1, duration: 1000, useNativeDriver: true });
    anim.start(() => console.log(_foo));
  }

  useEffect(() => {
    foo.addListener(_onChangeFoo);
    showFoo();
    return () => foo.removeListener(_onChangeFoo);   
  });

  return <View />;

}

经典实现

import React from 'react';
import { Animated, View } from 'react-native';

class ClassBar extends React.Component {

  constructor(props) {
    super(props);
    this.state = { foo: new Animated.Value(0) };
    this._foo = 0;
    this._onChangeFoo = this._onChangeFoo.bind(this);
  }

  componentDidMount() {
    this.state.foo.addListener(this._onChangeFoo);
    this.showFoo();
  }

  componentWillUnmount() {
    this.state.foo.removeListener(this._onChangeFoo);
  }

  showFoo() {
    let anim = Animated.timing(this.state.foo, { toValue: 1, duration: 1000, useNativeDriver: true });
    anim.start(() => console.log(this._foo));
  }

  _onChangeFoo({ value }) {
    this._foo = value;
  }

  render() {
    return <View />;
  }

}

推荐答案

useRef 钩子不仅用于 DOM 引用，还可以存储您喜欢的任何可变值.

The useRef hook is not just for DOM refs, but can store any mutable value you like.

示例

function FunctionalBar(props) {
  const [foo] = useState(new Animated.Value(0));
  const _foo = useRef(0);

  function showFoo() {
    let anim = Animated.timing(foo, { toValue: 1, duration: 1000, useNativeDriver: true });
    anim.start(() => console.log(_foo.current));
  }

  useEffect(() => {
    function _onChangeFoo({ value }) {
      _foo.current = value;
    }

    foo.addListener(_onChangeFoo);
    showFoo();
    return () => foo.removeListener(_onChangeFoo);
  }, []);

  return <View />;
}

这篇关于在功能组件中存储非状态变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！