样式私有化

单页应用开发中，所有组件的css最终会整合到一个html中，样式私有化在单页应用中是一个需要去解决的问题。

vue css样式私有化

vue中样式私有化十分简单，style上加入scoped即可。要覆盖第三方样式使用::v-deep即可，原理如下：

原理就是 属性选择器

第三方样式无法覆盖的原理，

react css样式私有化

react并没有vue这一套机制，目前没有一个特定的方式。所以当前市面上流行的有如下几种，这几种各有优缺点，请根据实际应用场景进行选择。

redux

安装

yarn add react-redux

基本使用

借助react-redux提供的组件Provider，全局注入store

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

// 导入redux仓库
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <Vote />
  </Provider>
)

创建React项目

创建一个react项目

webpack的方式

借助一个脚手架：create-react-app

• 全局安装脚手架命令
  • yarn global add create-react-app
  • npm install create-react-app -g
• 查看脚手架版本：create-react-app --version
• 创建项目： create-react-app 项目名
• 进入项目： cd 项目名
• 运行命令： npm run start

基础语法

jsx/tsx【这个很重要】

全称： javascript and xml(html), 作用就是将js与html结合再一个文件中。

描述： 对js进行了扩展，让js文件可以直接定义节点类型，而且使用节点给变量赋值！理解为一个新的模板语法（可以向模板中插入值），类比成vue中template

只有一个根节点

<React.Fragment>
    <div className='A'>

     </div>
	<div className='B'>1123</div>
</React.Fragment>