速学react基本语法（一）

　　为什么学习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的结构：     
　　react的结构 类组件和函数组件，现在react-hooks的兴起，推崇函数组件写法 import React from ＂react＂ import ReactDOM from ＂react-dom＂  /*   类组件： */  class App extends React.Component {   render() {     return (                内容            )   } } //函数创建组件：  function Hello() {   return (      这是我的第一个函数组件    )  } // 使用箭头函数创建组件： const Hello = () => 这是我的第一个函数组件  export default App; 2.声明式渲染vue: 标识符 {{}}    react:标识符{}
　　1.hooks写法 import React,{useState} from ＂react＂;  function App() {   const [state] = useState(＂消息＂);   return (            
{state}
        ); }
　　2.类组件 import React, {Component} from ＂react＂;  class App extends Component {   state = {     message:＂消息＂   }   render() {     return (                {this.state.message}            );   } } 绑定元素
　　vue      鼠标悬停几秒钟查看此处动态绑定的提示信息！   
　　react
　　1.类组件  class App extends Component {   state = {     message:＂消息＂   }   render() {     return (                {this.state.message}            );   } }
　　2.函数组件 function App() {   const [state] = useState(＂消息＂);   return (            
{state}
        ); }
　　3.条件与循环
　　1.条件判断 vue采用指令v-if,v-else-if,v-else  function App() {     const [seen] = useState(true);     return (                {seen && 
现在你看到我了}            );   }   //函数渲染   function App() {     const [seen] = useState(true);     const loadData = () => {       if (seen) {         return 现在你看到我了       }}     return (                {loadData()}            );   }   //三元表达式：   function App() {     const [seen] = useState(false);     const loadData = () => {       return seen ? 正确的: 错误的     }     return (                {loadData()}            );   }   //逻辑与运算符   function App() {     const [seen] = useState(true);     const loadData = () => {       return seen && (正确的)     }     return (                {loadData()}            );   }react 语法更像原生实现，写法较多 function App() {   const [seen] = useState(true);   return (            {seen && 
现在你看到我了}        ); } //函数渲染 function App() {   const [seen] = useState(true);   const loadData = () => {     if (seen) {       return 现在你看到我了     }}   return (            {loadData()}        ); } //三元表达式： function App() {   const [seen] = useState(false);   const loadData = () => {     return seen ? 正确的: 错误的   }   return (            {loadData()}        ); } //逻辑与运算符 function App() {   const [seen] = useState(true);   const loadData = () => {     return seen && (正确的)   }   return (            {loadData()}        ); }
　　2.循环 vue采用指令v-for    react 语法数组map function App() {   const [todo] = useState([     { text: ＂学习 JavaScript＂,key:1 },     { text: ＂学习 Vue＂,key:2  },     { text: ＂整个牛项目＂,key:3  }   ]);   return (            
         {todo.map(item => 
{item.text}
)}     
    ); }总结：
　　通过以上比较，react更倾向于原生写法，不像vue那样用很多指令完成很多任务。学习比较多，就像自动挡的车和手动挡的车，各有各的优点。今天先写到这，未完待续…