react class和function 如何模拟vue中的 双向绑定 监听 computed的方式

在 React 中，类组件 和 函数组件 的写法有所不同。你提到的「双向绑定」、「监听」和「computed（计算属性）」这几个概念，原本来源于 Vue，但在 React 中我们也可以通过特定方式实现类似功能。

下面我将分别介绍：

---

1. 类组件中的双向绑定

在类组件中，要实现双向绑定（如表单输入），我们通常使用 state 和 onChange：

import React from 'react';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  handleChange = (e) => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      

        
        
你好，{this.state.name}
      
    );
  }
}

---

⚛️ 2. 函数组件中的双向绑定

函数组件用 useState 实现双向绑定：

import React, { useState } from 'react';

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

  return (
    

       setName(e.target.value)} />
      
你好，{name}
    
  );
}

---

3. 监听某个值的变化（Watch）

React 中没有 Vue 的 watch，但你可以使用 useEffect 模拟监听：

useEffect(() => {
  console.log("name 发生变化", name);
}, [name]); // name 改变就执行

类组件中想监听某个值，可以通过 componentDidUpdate 判断：

componentDidUpdate(prevProps, prevState) {
  if (prevState.name !== this.state.name) {
    console.log("name changed:", this.state.name);
  }
}

---

4. computed（计算属性）替代方案

React 中没有 computed，但可以使用 getter 函数 或 派生变量：

// 类组件中
get greeting() {
  return `你好，${this.state.name}`;
}

// 函数组件中
const greeting = useMemo(() => {
  return `你好，${name}`;
}, [name]);

---

✅ 总结

功能	类组件	函数组件
双向绑定	this.setState() + value	useState() + onChange
监听值变化	componentDidUpdate	useEffect([dep])
computed（计算）	getter 或方法	useMemo(() => ..., [deps])

---