为什么学习react

前端三大框架vue,react,angular,是现在前端界三驾马车。vue的star数193K，react的star数182K,angular的star数79.4K.

笔者上一家公司技术栈是vue,通过最近面试，还是不少企业要求会react的。闲话少续，开始学习吧，2022加油！

学习前置

• 作为已经用vue开发熟悉的我，当然时不时对比vue，学习比较快。
• 不熟的可以B站看哈浏览量比较靠前的视频。
• 直接npx create-react-app my-app创建一个react项目。 启动编译当前的React项目，并自动打开 http://localhost:3000/

基本语法

1.对比vue组件思想

相同点：都是组件化思想，大组件拆小组件，都有生命周期，都有数据通讯传值。

不同点：

vue的结构：

<template>  <div  </div></template><script>export default { }</script><style lang="less" scoped></style>

react的结构

• 类组件和函数组件，现在react-hooks的兴起，推崇函数组件写法

import React from 'react'import ReactDOM from 'react-dom'/*  类组件：*/class App extends React.Component {  render() {    return (      <div>        内容      </div>    )  }}//函数创建组件： function Hello() {  return (     <div>这是我的第一个函数组件</div>   ) }// 使用箭头函数创建组件：const Hello = () => <div>这是我的第一个函数组件</div>export default App;

2.声明式渲染

• vue: 标识符{{}}

<template>  <div {{ message }}  </div></template><script>export default { data(){ return { message:'消息' } }}</script>

• react:标识符{}

1.hooks写法

import React,{useState} from 'react';function App() {  const [state] = useState('消息');  return (    <div className="App">      <h1>{state}</h1>    </div>  );}

2.类组件

import React, {Component} from 'react';class App extends Component {  state = {    message:'消息'  }  render() {    return (      <div>        {this.state.message}      </div>    );  }}

• 绑定元素

vue

<span :title="message">    鼠标悬停几秒钟查看此处动态绑定的提示信息！  </span>

react

1.类组件

 class App extends Component {  state = {    message:'消息'  }  render() {    return (      <div>        <span title={this.state.message}>{this.state.message}</span>      </div>    );  }}

2.函数组件

function App() {  const [state] = useState('消息');  return (    <div className="App">      <h1 title={state}>{state}</h1>    </div>  );}

3.条件与循环

1.条件判断

• vue采用指令v-if,v-else-if,v-else

 function App() {    const [seen] = useState(true);    return (      <div id="app-3">        {seen && <p>现在你看到我了</p>}      </div>    );  }  //函数渲染  function App() {    const [seen] = useState(true);    const loadData = () => {      if (seen) {        return <div>现在你看到我了</div>      }}    return (      <div id="app-3">        {loadData()}      </div>    );  }  //三元表达式：  function App() {    const [seen] = useState(false);    const loadData = () => {      return seen ? <div>正确的</div>: <div>错误的</div>    }    return (      <div id="app-3">        {loadData()}      </div>    );  }  //逻辑与运算符  function App() {    const [seen] = useState(true);    const loadData = () => {      return seen && (<div>正确的</div>)    }    return (      <div id="app-3">        {loadData()}      </div>    );  }

• react 语法更像原生实现，写法较多

function App() {  const [seen] = useState(true);  return (    <div id="app-3">      {seen && <p>现在你看到我了</p>}    </div>  );}//函数渲染function App() {  const [seen] = useState(true);  const loadData = () => {    if (seen) {      return <div>现在你看到我了</div>    }}  return (    <div id="app-3">      {loadData()}    </div>  );}//三元表达式：function App() {  const [seen] = useState(false);  const loadData = () => {    return seen ? <div>正确的</div>: <div>错误的</div>  }  return (    <div id="app-3">      {loadData()}    </div>  );}//逻辑与运算符function App() {  const [seen] = useState(true);  const loadData = () => {    return seen && (<div>正确的</div>)  }  return (    <div id="app-3">      {loadData()}    </div>  );}

2.循环

• vue采用指令v-for

<template><div id="app-4">  <ol>    <li v-for="todo in todos" :key="todo.key">      {{ todo.text }}    </li>  </ol></div></template><script>export default { data(){ return { todos: [      { text: '学习 JavaScript',key:1 },      { text: '学习 Vue',key:2  },      { text: '整个牛项目',key:3  }    ] } }}</script>

• react 语法数组map

function App() {  const [todo] = useState([    { text: '学习 JavaScript',key:1 },    { text: '学习 Vue',key:2  },    { text: '整个牛项目',key:3  }  ]);  return (    <div id="app-4">      <ol>        {todo.map(item => <li key={item.key}>{item.text}</li>)}    </ol></div>  );}

总结：

通过以上比较，react更倾向于原生写法，不像vue那样用很多指令完成很多任务。学习比较多，就像自动挡的车和手动挡的车，各有各的优点。今天先写到这，未完待续。。。