react双向绑定、监听、计算

一、在React中，函数式组件是一种轻量级的组件类型，它通常用于简单的UI组件。
在函数式组件中实现双向绑定可以通过使用React Hooks中的useState和useEffect来实现。

下面是一个详细的例子，演示如何在React函数式组件中实现双向绑定：

import React, { useState, useEffect } from 'react';

function TextInput(props) {
  const [value, setValue] = useState(props.value);

  useEffect(() => {
    setValue(props.value);
  }, [props.value]);

  function handleChange(event) {
    setValue(event.target.value);
    props.onChange(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

function App() {
  const [name, setName] = useState('');

  function handleNameChange(value) {
    setName(value);
  }

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <TextInput value={name} onChange={handleNameChange} />
    </div>
  );
}

export default App;

在上面的例子中，我们定义了一个名为TextInput的组件，它接收一个value和onChange属性。
在组件内部，我们使用useState来定义一个名为value的状态变量，并将其初始化为props.value。
我们还使用useEffect来监听props.value的变化，并在变化时更新value状态变量。

在handleChange函数中，我们使用setValue来更新value状态变量，
并调用props.onChange来通知父组件值的变化。

在App组件中，我们使用useState来定义一个名为name的状态变量，并将其初始化为空字符串。
我们还定义了一个名为handleNameChange的函数，它接收一个值并使用setName来更新name状态变量。

最后，我们在App组件中渲染了一个h1元素来显示name的值，并渲染了一个TextInput组件来实现双向绑定
。当TextInput组件的值发生变化时，它会调用handleNameChange函数来更新name状态变量，从而实现双向绑定。

总之，使用useState和useEffect可以很容易地在React函数式组件中实现双向绑定。

二、react函数式组件监听

以下是一个使用React函数式组件监听的详细例子：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在组件挂载后执行
    console.log('组件挂载后执行');

    // 在组件卸载前执行
    return () => console.log('组件卸载前执行');
  }, []);

  useEffect(() => {
    // 在count改变后执行
    console.log('count改变后执行');
  }, [count]);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default Example;

在这个例子中，我们使用了React的`useState`和`useEffect`钩子函数。
`useState`用于在函数式组件中创建一个状态变量`count`，并使用`setCount`函数来更新它。
`useEffect`用于监听组件的生命周期和状态变量的变化。

在第一个`useEffect`中，我们传递了一个空数组`[]`作为第二个参数，
这意味着它只会在组件挂载和卸载时执行。在这个例子中，我们在组件挂载后打印一条消息，
并在组件卸载前打印另一条消息。

在第二个`useEffect`中，我们传递了一个数组`[count]`作为第二个参数，
这意味着它只会在`count`变化时执行。在这个例子中，我们在`count`变化后打印一条消息。

最后，我们在组件中渲染了一个按钮，当点击按钮时，会调用`setCount`函数来更新`count`变量的值。
这将触发第二个`useEffect`的执行，因为它监听了`count`的变化。

三、React没有计算属性，但是我们可以通过useMemo这个hook来实现，
和Vue computed不太一样的地方在于，我们必须手动维护依赖

useMemo是React提供的一个钩子函数，用于优化组件的性能。它的作用是在组件渲染时，根据依赖项的变化，缓存计算结果，避免重复计算。

下面是一个使用useMemo的例子：

import React, { useMemo, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const memoizedValue = useMemo(() => {
    console.log('useMemo called');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Text: {text}</p>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
}

export default App;


在这个例子中，我们定义了一个memoizedValue变量，它的值是通过useMemo计算得到的。
useMemo的第一个参数是一个函数，它返回计算结果。第二个参数是一个数组，表示依赖项。
当依赖项发生变化时，useMemo会重新计算memoizedValue的值。

在这个例子中，我们把count作为依赖项传给了useMemo。当count发生变化时，useMemo会重新计算memoizedValue的值。
而当text发生变化时，useMemo不会重新计算memoizedValue的值，因为text不是依赖项。

我们在memoizedValue的计算函数中加入了一个console.log语句，用于观察useMemo的调用情况。
当count发生变化时，我们可以看到控制台输出了'useMemo called'，表示useMemo重新计算了memoizedValue的值。

通过使用useMemo，我们可以避免在每次组件渲染时都重新计算memoizedValue的值，从而提高组件的性能。