React 的思路是 HTML in JavaScript 也可以说是 All in JavaScript，通过 JavaScript 来生成 HTML，所以设计了 JSX 语法，通过 JS 来操作 CSS，社区的styled-component、JSS等。
Vue 是把 HTML，CSS，JavaScript 组合在一起，用各自的处理方法，Vue 有单文件组件，可以使用 HTML、CSS、JS 写一份文件，HTML 提供模板引擎进行处理。
两者的生命周期对比：
vue生命周期分为四个过程： 1、创建过程（beforeCreate、created）
- beforeCreate(创建前):当前生命周期el和data尚未初始化，还不能访问data、methods、computed、watch方法和数据【可在此添加loading加载事件】
- created(创建后):当前生命周期data初始化完成，可访问data、methods、computed、watch上面的方法和数据，el初始化还没有完成，所以不能访问前后数据交互ajax请求数据】
2、挂载过程（beforeMount、mounted）
- beforeMount(挂载前):挂载前调用，挂载元素获取DOM节点
- mounted(挂载后):可操作DOM节点视频播放器、地图等
3、更新过程（beforeUpdate、updated）
- beforeUpdate(更新前):更新前调用页面数据，监控数据变化，获取最新数据，但页面数据不会更新
- updated(更新后):结合当前生命周期更新的数据和模板
4、销毁过程（beforeDestroy、destroyed）
- beforeDestroy(销毁前):实例销毁前调用
- destroyed(销毁后):实例销毁后调用【可以做一些移除操作:清除定时器，解除事件】
React从广义上讲，生命周期分为三个阶段：挂载、渲染和卸载
1、mounted这个阶段的组件由阶段(初始化)组成jsx转换成真实dom。
constructor()：对this.state初始化componentWillMount()：在render方法前触发render()：生成需要渲染的内容并返回，不会真正操作 DOM。真实 DOM 的渲染由ReactDOM.render完成componentDidMount()：渲染后触发，此时可以访问真相 DOM 。类似于异步请求和数据初始化的操作也可以在这个生命周期中进行
2、update当组件修改自身状态或父组件修改子组件属性时，阶段(更新)发生。
- componentWillReceiveProps (nextProps)：可以做一些内存释放、定时器清洗等操作
- shouldComponentUpdate (nextProps,nextState)：通过对比nextProps和this.props，将nextProps的state目前的组件state，重新渲染组件
- componentWillUpdate (nextProps,nextState)：shouldComponentUpdate返回true之后，组件进入再渲染过程，进入componentWillUpdate,也可以在这里拿到nextProps和nextState。
- componentDidUpdate(prevProps, prevState)：组件更新后触发
componentDidMount类似的，可以在里面处理 DOM 操作；作为子组件更新后通知父组件的标志。
3、umount阶段(卸载)这通常是浏览器回收组件的阶段。
componentWillUnmount()：可以在里面做一些释放内存，清理定时器等操作
npx create-react-app react-demo（！Node 版本太低，需要调整到14 ）【需安装nvm切换node版本为14.19.1】
npm start
<!-- src/App.js --> import React from 'react' function App() { return ( <div className="App"> <h1>This is React App.</h1> </div> ) } export default App<!-- src/index.js --> import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render( <App />, document.getElementById('root') )<!-- public/index.html --> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>由于React3月29日，团队新推出React v18.0版本，现在npm 默认是18版，因为React 18 不再支持 ReactDOM.render。因此，控制台报错：Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 的警告信息
import React from 'react';
import ReactDOM from 'react-dom/client'; // 修改后的引入路径
import App from './App';
// 修改后的ReactDom方法
ReactDOM.createRoot(document.getElementById('root')) .render(
<React.StrictMode>
<App />
</React.StrictMode>
);