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 (<div><input value={this.state.name} onChange={this.handleChange} /><p>你好，{this.state.name}</p></div>);}
}

---

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

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

import React, { useState } from 'react';function MyForm() {const [name, setName] = useState('');return (<div><input value={name} onChange={(e) => setName(e.target.value)} /><p>你好，{name}</p></div>);
}

---

👂 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])

---