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

IT技术 javascript reactjs react-native react-hooks
2021-04-15 00:01:54

下面是两个几乎做同样事情的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 />;
  }

}
5个回答

该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 />;
}
useRef 返回一个对象，其引用在重新渲染时不会改变，foo 的实际值然后保存在该对象的当前属性中。@Scribblemacher
2021-06-04 00:01:54
为什么它以这种方式工作？在非 React 函数中，只要函数仍在作用域内，您就可以直接在函数内设置 _foo（前提是您将其从 更改const为let）。这里发生了什么让这一切变得不同？
2021-06-13 00:01:54

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

参考

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

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

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

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

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

这是一个非常不寻常的例子，但如果我没看错的话，你只是想在_foo每次组件挂载时存储唯一的对象，并在卸载时销毁它们，但还要防止在此值更改时进行额外的重新渲染。

我之前遇到过这种情况，简单的对象（地图/哈希）应该可以解决问题：

let foos = {}
let fooCount = 0

function F(props) {
  useEffect(() => {
    let fooId = fooCount++
    foos[fooId] = new Animated.Value(0)
    foos[fooId].addListener(...)
    return () => foos[fooId].removeListener(...)
  }, []) // <-- do not rerun when called again (only when unmounted)

  ...render...
}

或类似的东西。如果您有一个可运行的示例，可以对其进行调整以使其更适合您的示例。无论哪种方式，大多数具有范围问题的事情都可以通过原语解决。

如果您在任何时候页面上只有 1 个组件实例，这将没问题。但是，如果您有多个组件，则在组件函数之外声明的变量将用于所有组件。我发现最好使用 useRef 方法。
2021-06-09 00:01:54
在foos函数 F 之外降级与在内部降级有什么区别？
2021-06-15 00:01:54
每次渲染时都会调用@vikrant 组件函数，所以如果你把普通的变量声明放在里面，那么它们在每次渲染时都会被覆盖。
2021-06-21 00:01:54

我在使用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 />;
}
其它你可能感兴趣的问题
上一篇如何使 javascript scrollIntoView 平滑？ 下一篇react本机和Android？