React 和 Vue 都是现在流行的前端库，而前端的核心就在于对数据的请求和操作页面DOM元素；遵循MVVM思想，二者对视图和数据的绑定操作有一定的相似。
归根结底还是三大基本问题：
- 渲染什么
渲染的内容是什么 ，渲染的DOM结构是什么？ - 在哪里渲染？
挂载到页面哪里 - 怎么渲染
渲染时的数据怎么存储和更改，数据通信怎么操作?，子组件怎么使用？
1.渲染什么
- React
Class组件,render()方法return JSX
class Button extends React.Component{
constructor(){
super()
}
render(){
return()
}
}
function组件，return JSX
function Button() {
return ()
}
- Vue
组件的template标签里/Vue实例的template选项里
2. 在哪里渲染
React和Vue创建实例之后都必须挂载到DOM元素上才会生效。
- Vue
Vue 构造器中有一个el参数 - React
通过ReactDOM.render( )的第二个参数,第一个参数是要渲染的JSX或者组件
ReactDOM.render(
<Index />,
document.getElementById('root')
)
3. 怎么渲染
3.1数据/包含组件中数据 存储
对要渲染的数据进行存储和操作
- Vue
Vue构造器的data选项，通过{{}}插值 - React
1.Class组件：
构造器constructor里设置state对象，通过{}插值，其他地方只能通过setState修改
class LikeButton extends Component {
constructor () {
super()
// 初始化数据
this.state = { isLiked: false }
}
handleClickOnLikeButton () {
// 修改数据
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<button onClick={this.handleClickOnLikeButton.bind(this)}>
{this.state.isLiked ? '取消' : '点赞'} 👍
</button>
)
}
}
2.function组件
通过hooks API 使用 state，useState和useEffect，通过{}插值
function App() {
const [count, setCount] = useState(0);
const [user, setUser] = useState({
name: "frank",
age: 18,
hobbies: ["lol", "ball", "movie"]
});
// useEffect(() => {
// document.getElementById("output").innerText = count;
// });
const add = () => {
setCount(count + 1);
};
const old = () => {
setUser({
...user, //把user的内容全部映射过来
age: user.age + 1
});
};
};
return (
<div>
<div>{count}</div>
<div>
<button onClick={add}>+1</button>
</div>
<div>
{user.name},{user.age},<br />
</div>
<div>
<button onClick={old}>+1</button>
</div>
</div>
);
}
3.2操作数据
- Vue
computed,filter,methods, - React
在组件内部定义方法 ，class组件需要调用方法时需要bind(this)或者使用箭头函数
3.3生命周期
3.4数据通信，组件通信，状态仓库管理
状态仓库管理
- Vuex
通过数据state和操作mutations,actions创建store, 将store注入vue实例,实例的所有子组件都可以使用。 - React-redux
通过数据state和操作action创建reducer,然后根据reducer创建store,通过<Provider>注入父组件，所有的内部子组件通过connect(mapStateToProps,mapDispatchToProps)(App)把state和action放到props上使用。
3.5路由
- vue-router
<router-link>to属性决定跳转路径，<router-view>决定根据路由显示的组件和其位置 - react-router
ReactDOM.render(
<Router>
<div>
<div>
<Link to="/">
<button>首页</button>
</Link>{" "}
|<Link to="/login">登录</Link> |<Link to="/signup">注册</Link> |
<Link to="/welcome">欢迎</Link>
</div>
<Route path="/" exact component={App} />
<Route path="/login" component={Box2} />
<Route path="/signup" component={Box1} />
<Route path="/welcome" component={Welcome} />
</div>
</Router>,
rootElement
);
<Link> to属性决定跳转路径，<Router>根据path决定显示的组件及其位置。
