React 入门（一）

React和Vue对比

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

简化项目

import React from 'react'

function App() {
  return (
    

      
This is React App.
    
  )
}
export default App

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
    , 
    document.getElementById('root')
)

 由于React团队在3月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. 的警告信息

修改index.js文件 

import React from 'react';
import ReactDOM from 'react-dom/client';  // 修改后的引入路径 
import App from './App';

// 修改后的ReactDom方法
ReactDOM.createRoot(document.getElementById('root')) .render(
　　
　　　　　　
　　
);