React 和 Vue 基础知识对比

React 和 Vue 都是现在流行的前端库，而前端的核心就在于对数据的请求和操作页面DOM元素；遵循MVVM思想，二者对视图和数据的绑定操作有一定的相似。
归根结底还是三大基本问题：

1. 渲染什么
   渲染的内容是什么 ，渲染的DOM结构是什么？
2. 在哪里渲染？
   挂载到页面哪里
3. 怎么渲染
   渲染时的数据怎么存储和更改，数据通信怎么操作?，子组件怎么使用？

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决定显示的组件及其位置。