reactjs - useMemo 可以用来在 React 页面中查找斐波那契数吗?

标签 reactjs react-hooks

它花费了超过 30 秒(而不是不到 1 秒),所以我认为它没有正确使用 useMemo:

<body>

    <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8f989c9e89bdcccbd3cccfd3cd" rel="noreferrer noopener nofollow">[email protected]</a>/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f3e4e0e2f5ace5eeecc1b0b7afb0b3afb1" rel="noreferrer noopener nofollow">[email protected]</a>/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8af9feebe4eeebe6e5e4efcabda4b2a4be" rel="noreferrer noopener nofollow">[email protected]</a>/babel.min.js" crossorigin></script>

    <div id="root"></div>

    <script type="text/babel">

        function Fib({n}) {
            const m = Number(n)
            console.log("Fib", m);

            const fib = (n) => {
                if (n <= 1) return n;
                else return fib(n-1) + fib(n-2);
            }
            
            const result = React.useMemo(() => fib(m), [m]);

            return <li key={m}>Fibonacci({m}) is {result}</li>;

        }

        function App() {
            return (
                <ul>
                    { Array.from({length: 41}).map((e,i) => 
                        <Fib key={i} n={i} />
                    )}
                </ul>
            )
        }

        ReactDOM.render(<App />, document.querySelector("#root"));

    </script>
</body>

看来实际上必须是:

const fib = (n) => {
    if (n <= 1) return n;
    else return React.useMemo(() => fib(m - 1), [m - 1]) + React.useMemo(() => fib(m - 2), [m - 2]);
}

const result = React.useMemo(() => fib(m), [m]);

但是 useMemo() 必须在“顶层”函数中使用。有可能让它发挥作用吗?

最佳答案

我相信这是可以做到的。

  const App = () => {
    const [fibs, setFibs] = useState([1, 1])
    useMemo(() => {
      const len = fibs.length
      if (n <= len) return fibs[n - 1]
      const newFib = fibs[n - 2] + fibs[n - 3]
      setFibs([...fibs, newFib])
    }, [n])

    // do whatever to change n
  }

重点是 useMemo 并不是典型的内存方案,它的作用更像是专门用于在某些渲染中跳过计算。

所以这里如果n发生变化,它想要对存储fibs进行修改,这意味着fibs更像是真正的内存存储以保存所有条件下的计算。

因此,总体节省不是在渲染部分,而是更多地在计算上,我认为这是您要保存的部分:)

关于reactjs - useMemo 可以用来在 React 页面中查找斐波那契数吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60318604/

相关文章:

reactjs - 在React ES6中,为什么输入字段在输入字符后失去焦点?

reactjs - 当 redux 存储的非相关部分在 react-redux 中更新时组件重新渲染

javascript - React 在 setState 中访问超出范围的变量

javascript - react 类型错误 : Cannot read property 'getDates' of undefined

javascript - 单击外部组件时关闭弹出窗口

react-native - 如何将 useState 更新为 TextInput

reactjs - react : leave the contents of a component alone

reactjs - 使用 setTimeout() 调用 Redux 操作

input - react JSX : How to set props to placeholder attribute

javascript - 重新渲染之前最初显示的登录页面 - Reactjs