在功能组件中存储非状态变量

Question

以下是两个 几乎
完成相同任务的React组件。一个是功能；另一个是功能。另一个是一类。每个组件都有一个Animated.Value带有异步侦听器的组件，该侦听器会_foo在更改时进行更新。我需要能够_foo像this._foo在经典组件中那样在功能组件中进行访问。

• FunctionalBar``_foo万一有一个以上的情况，不应在全球范围内FunctionalBar。
• FunctionalBar不能包含_foo在功能范围内，因为_foo每次FunctionalBar渲染时都会重新初始化。_foo也不应处于状态，因为_foo更改时组件无需呈现。
• ClassBar不会出现此问题，因为它在组件的整个生命周期中都保持_foo初始化状态this。

如何_foo在FunctionalBar不将其置于全局范围内的情况下保持初始化？

功能实现

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 />;
  }

}

Answer 1

该useRef钩子不仅用于DOM引用，而且可以存储您喜欢的任何可变值。

例

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 />;
}