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

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

Answer 2

只是为了支持 Tholle 的回答，这里是官方文档

参考

但是，useRef()除了 ref 属性外，它的作用更大。保持任何可变值类似于在类中使用实例字段的方式，这很方便。

这是有效的，因为useRef()创建了一个普通的 JavaScript 对象。useRef()和{current: ...}自己创建对象之间的唯一区别是，useRef在每次渲染时都会为您提供相同的 ref 对象。

请记住，useRef当其内容更改时不会通知您。改变 .current 属性不会导致重新渲染。如果您想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能需要改用回调 ref。

Answer 3

您可以使用useRef钩子（这是docs 中所述的推荐方式）：

• 声明变量： const a = useRef(5) // 5 is initial value
• 获取值： a.current
• 设置值： a.current = my_value

Answer 4

我很幸运地使用了useRef带有解构的钩子（+一个可选变量别名“my”），然后您将所有值保留在对象中，my这样您就不必使用多个引用或一直使用myref.current：

function MyComponent(props) {
  const componentRef = useRef({});
  const { current: my } = componentRef;

  my.count = 42;
  console.log(my.count); // 42

  my.greet = "hello";
  console.log(my.greet); // hello

  return <div />;
}