速学react-基本语法(一)为什么学习react 前端三大框架vue,react,angular,是现在前端界三驾马车

为什么学习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>
    );
  }
}

绑定元素

 <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

<template>
  <div
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
  </div>
</template>

<script>
export default {
 data(){
 return {
 seen:true
 }
 }
}
</script>

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那样用很多指令完成很多任务。学习比较，就像自动挡的车和手动挡的车，各有各的优点。今天先写到这，未完待续。。。