React 学习笔记 14（共享数据管理）

最新推荐文章于 2024-05-21 09:44:23 发布
最新推荐文章于 2024-05-21 09:44:23 发布
阅读量122 收藏
点赞数
分类专栏： 项目经验 文章标签： react.js redux react-redux redux-saga
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818627/article/details/120448364
版权

1.同步解决共享数据

问题引入，我最终想实现的效果如下

         

方案一：原生Redux

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/Vote';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux'

const initial = {
  title: 'React vs Vue 哪家强？',
  suppNum: 0,
  oppNum: 0
}
function reducer(state = initial, action) {
  switch (action.type) {
    case 'SUPPORT':
      state.suppNum += action.payload;
      break;
    case 'OPPOSE':
      state.oppNum += action.payload;
      break;
      default:
        break;
  }
  return state
}

const store = createStore(reducer)

ReactDOM.render(
  <React.StrictMode>
    <App store={store} />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
// vote.js
import React, { Component } from 'react'
import VoteHeader from './VoteHeader'
import VoteBody from './VoteBody'
import VoteFooter from './VoteFooter'

export default class Vote extends Component {
    render() {
        const { store } = this.props
        return (
            <div>
                <VoteHeader store={store} />
                <VoteBody store={store} />
                <VoteFooter store={store} />
            </div>
        )
    }
}
//VoteHeader.jsx
import React, { Component } from 'react'

export default class VoteHeader extends Component {
    componentDidMount(){
        const { store } = this.props;
        // 订阅事件
        store.subscribe(()=>this.forceUpdate())
    }
    render() {
        const { store } = this.props;
        const { title, suppNum, oppNum } = store.getState();
        return (
            <div>
                <h1>{title}</h1>
                <p>NUM:{suppNum + oppNum}</p>
            </div>
        )
    }
}
// VoteBody.jsx
import React, { Component } from 'react'

export default class VoteBody extends Component {
    constructor(props) {
        super(props)
        const { store } = this.props
        const { suppNum, oppNum } = store.getState()
        this.state = {
            suppNum,
            oppNum
        }
    }
    componentDidMount() {
        const { store } = this.props
        // 订阅事件
        store.subscribe(() => {
            console.log(store.getState())// {title: 'React vs Vue 哪家强？', suppNum: 0, oppNum: 0 }
            const { suppNum, oppNum } = store.getState()
            // 自己做个渲染优化吧
            if (suppNum !== this.state.suppNum) {
                this.setState({
                    suppNum: suppNum
                })
            }
            if (oppNum !== this.state.oppNum) {
                this.setState({
                    oppNum: oppNum
                })
            }
        })

    }
    render() {
        const { suppNum, oppNum } = this.state
        return (
            <div>
                <p>suppNum:{suppNum}</p>
                <p>oppNum:{oppNum}</p>
            </div>
        )
    }
}

// VoteFooter.jsx
import React, { Component } from 'react'

export default class VoteFooter extends Component {
    render() {
        return (
            <div>
                <button onClick={()=>this.handler(0)}>支持</button>
                <button onClick={()=>this.handler(1)}>反对</button>
            </div>
        )
    }
    handler = type => {
        console.log(type)
        const { store } = this.props
        if(type === 0 ){
            store.dispatch({
                type: 'SUPPORT',
                payload: 10
            })
            return
        }
        store.dispatch({
            type: 'OPPOSE',
            payload: 5
        })
    }
}

方案二：Redux工程化解决方案

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/Vote';
import reportWebVitals from './reportWebVitals';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <App store={store} />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 vote.jsx

import React, { Component } from 'react'
import VoteHeader from './VoteHeader'
import VoteBody from './VoteBody'
import VoteFooter from './VoteFooter'

export default class Vote extends Component {
    render() {
        const { store } = this.props
        return (
            <div>
                <VoteHeader store={store} />
                <VoteBody store={store} />
                <VoteFooter store={store} />
            </div>
        )
    }
}

VoteHeader.jsx

import React, { Component } from 'react'

export default class VoteHeader extends Component {
    componentDidMount(){
        const { store } = this.props;
        // 订阅事件
        store.subscribe(()=>this.forceUpdate())
    }
    render() {
        const { store } = this.props;
        // 解构时后面需要从vote模块获取
        const { title, suppNum, oppNum } = store.getState().vote;
        return (
            <div>
                <h1>{title}</h1>
                <p>NUM:{suppNum + oppNum}</p>
            </div>
        )
    }
}

VoteBody.jsx

import React, { Component } from 'react'

export default class VoteBody extends Component {
    constructor(props) {
        super(props)
        const { store } = this.props
        console.log(store.getState(),'store')
        const { suppNum, oppNum } = store.getState().vote
        this.state = {
            suppNum,
            oppNum
        }
    }
    componentDidMount() {
        const { store } = this.props
        // 订阅事件
        store.subscribe(() => {
            console.log(store.getState().vote)// {title: 'React vs Vue 哪家强？', suppNum: 0, oppNum: 0 }
            // 解构时后面需要从vote模块获取
            const { suppNum, oppNum } = store.getState().vote
            // 自己做个渲染优化吧
            if (suppNum !== this.state.suppNum) {
                this.setState({
                    suppNum: suppNum
                })
            }
            if (oppNum !== this.state.oppNum) {
                this.setState({
                    oppNum: oppNum
                })
            }
        })

    }
    render() {
        const { suppNum, oppNum } = this.state
        return (
            <div>
                <p>suppNum:{suppNum}</p>
                <p>oppNum:{oppNum}</p>
            </div>
        )
    }
}

VoteFooter.jsx

import React, { Component } from 'react'
import action from '../store/actions'

export default class VoteFooter extends Component {
    render() {
        return (
            <div>
                <button onClick={() => this.handler(0)}>支持</button>
                <button onClick={() => this.handler(1)}>反对</button>
            </div>
        )
    }
    handler = type => {
        console.log(type)
        const { store } = this.props
        if (type === 0) {
            store.dispatch(action.vote.support(10))
            return
        }
        store.dispatch(action.vote.oppose(5))
    }
}

store->actions

// voteAction.js
import * as TYPES from '../action-types'

const voteAction = {
    support(payload) {
        return {
            type: TYPES.VOTE_SUPPORT,
            payload
        }
    },
    oppose(payload) {
        return {
            type: TYPES.VOTE_OPPOSE,
            payload
        }
    }
}

export default voteAction;

// userAction.js
const userAction = {}
export default userAction;
// index.js
import voteAction from "./voteAction";
import userAction from "./userAction";


const action = {
    vote: voteAction,
    user: userAction
}

export default action;

store->reducers

//userReducer.js
const initinal = {
    title: ''
}
export default function userReducer(state = initinal, action) {
    state = JSON.parse(JSON.stringify(state))
    switch (action.type) {
        default:
            break;
    }
    return action
}
// voteReducer.js
import * as TYPES from '../action-types'
const initial = {
    title: 'React vs Vue 哪家强？',
    suppNum: 0,
    oppNum: 0
}
export default function voteReducer(state = initial, action) {
    state = JSON.parse(JSON.stringify(state))
    switch (action.type) {
        case TYPES.VOTE_SUPPORT:
            state.suppNum += action.payload;
            break;
        case TYPES.VOTE_OPPOSE:
            state.oppNum += action.payload;
            break;
        default:
            break;
    }
    return state;
}
// index.js
import { combineReducers } from "redux";
import voteReducer from "./voteReducer";
import userReducer from "./userReducer";

/**
 * 合并后的reducer
 * state:{
 *      vote:{
 *          title: ''
 *      }
 *      user:{
 *          title: ''
 *      }
 * }
 */
const reducer = combineReducers({
    vote: voteReducer,
    user: userReducer
})

export default reducer;

store->action-types

/** 宏定义 */
// vote模块
export const VOTE_SUPPORT = 'VOTE_SUPPORT';
export const VOTE_OPPOSE = 'VOTE_OPPOSE';
// user模块

store->index.js

import { createStore } from "redux";
import reducer from './reducers'


const store = createStore(reducer);

export default store;

方案三： React-Redux

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/Vote';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

vote.jsx

import React, { Component } from 'react'
import VoteHeader from './VoteHeader'
import VoteBody from './VoteBody'
import VoteFooter from './VoteFooter'

export default class Vote extends Component {
    render() {
        return (
            <div>
                <VoteHeader/>
                <VoteBody/>
                <VoteFooter/>
            </div>
        )
    }
}

VoteHeader.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux';

class VoteHeader extends Component {
    componentDidMount(){
        // const { store } = this.props;
        // // 订阅事件
        // store.subscribe(()=>this.forceUpdate())
    }
    render() {
        // 解构时后面需要从vote模块获取
        console.log(this.props)
        const { title, suppNum, oppNum } = this.props;
        return (
            <div>
                <h1>{title}</h1>
                <p>NUM:{suppNum + oppNum}</p>
            </div>
        )
    }
}
const mapStateToProps =(state)=>{
    console.log(state)// {vote:{...},user:{...}}
    return {
        ...state.vote
    }
}
export default connect(mapStateToProps)(VoteHeader)

VoteBody.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'

class VoteBody extends Component {
    // constructor(props) {
    //     super(props)
    //     const { store } = this.props
    //     console.log(store.getState(),'store')
    //     const { suppNum, oppNum } = store.getState().vote
    //     this.state = {
    //         suppNum,
    //         oppNum
    //     }
    // }
    // componentDidMount() {
    //     const { store } = this.props
    //     // 订阅事件
    //     store.subscribe(() => {
    //         console.log(store.getState().vote)// {title: 'React vs Vue 哪家强？', suppNum: 0, oppNum: 0 }
    //         // 解构时后面需要从vote模块获取
    //         const { suppNum, oppNum } = store.getState().vote
    //         // 自己做个渲染优化吧
    //         if (suppNum !== this.state.suppNum) {
    //             this.setState({
    //                 suppNum: suppNum
    //             })
    //         }
    //         if (oppNum !== this.state.oppNum) {
    //             this.setState({
    //                 oppNum: oppNum
    //             })
    //         }
    //     })

    // }
    render() {
        const { suppNum, oppNum } = this.props
        return (
            <div>
                <p>suppNum:{suppNum}</p>
                <p>oppNum:{oppNum}</p>
            </div>
        )
    }
}
export default connect(state=>state.vote)(VoteBody);

VoteFooter.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from '../store/actions'
class VoteFooter extends Component {
    render() {
        return (
            <div>
                <button onClick={() => this.handler(0)}>支持</button>
                <button onClick={() => this.handler(1)}>反对</button>
            </div>
        )
    }
    handler = type => {
        const { support, oppose } = this.props
        if (type === 0) {
            support(10)
            return
        }
        oppose(5)
    }
}
// 函数形式
// const mapDispatchToProps = dispatch => {
//     return {
//         support(payload) {
//             dispatch(action.vote.support(payload))
//         },
//         oppose(payload) {
//             dispatch(action.vote.oppose(payload))
//         }
//     }
// }
// 对象形式
// action.vote= {
//     support(payload) {
//         return {
//             type: TYPES.VOTE_SUPPORT,
//             payload
//         }
//     },
//     oppose(payload) {
//         return {
//             type: TYPES.VOTE_OPPOSE,
//             payload
//         }
//     }
// }
export default connect(null, action.vote)(VoteFooter);

store文件夹下的内容和方案二相同，不再赘述。

2.异步解决方法

问题引入，假设现在我们点解投票之后，并不是马上修改值，而是延时1秒之后，才更新值。此时我们就要引入中间件来解决

方案一 rudux-thunk

store/index.js

import { createStore,applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk"
import reducer from './reducers'


const store = createStore(reducer,applyMiddleware(logger,thunk));

export default store;

store/actions/voteAction.js

import * as TYPES from '../action-types'

const voteAction = {
    support(payload) {
        // setTimeout(() => {
        //     return {
        //         type: TYPES.VOTE_SUPPORT,
        //         payload
        //     }
        // }, 1000)
        // redux-thunk中间件的使用
        return dispatch => {
            setTimeout(() => {
                dispatch(
                    {
                        type: TYPES.VOTE_SUPPORT,
                        payload
                    }
                )

            }, 1000)
        }

    },
    oppose(payload) {
        return {
            type: TYPES.VOTE_OPPOSE,
            payload
        }
    }
}

export default voteAction;

方案二 rudex-promise

store/index.js

import { createStore,applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk"
import promise from "redux-promise";
import reducer from './reducers'


const store = createStore(reducer,applyMiddleware(logger,thunk,promise));

export default store;

store/actions/voteAction.js

import * as TYPES from '../action-types'

const voteAction = {
    support(payload) {
        // setTimeout(() => {
        //     return {
        //         type: TYPES.VOTE_SUPPORT,
        //         payload
        //     }
        // }, 1000)
        // redux-thunk中间件的使用
        // return dispatch => {
        //     setTimeout(() => {
        //         dispatch(
        //             {
        //                 type: TYPES.VOTE_SUPPORT,
        //                 payload
        //             }
        //         )

        //     }, 1000)
        // }
        // redux-promise中间件的使用,返回的负荷属性必须用payload,用其他的属性不好用
        return {
            type: TYPES.VOTE_SUPPORT,
            payload: new Promise((resolve, reject) => {
                setTimeout(_ => {
                    resolve(payload)
                }, 1000)
            })
        }

    },
    oppose(payload) {
        return {
            type: TYPES.VOTE_OPPOSE,
            payload
        }
    }
}

export default voteAction;

方案三 redux-saga

store/index.js

import { createStore,applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk"
import promise from "redux-promise";
import reducer from './reducers'


// redux-saga
import createSagaMiddleware from "redux-saga";
// 引入根saga
import rootSaga from './saga/rootSaga';
// 创建一个saga中间件
const sagaMiddleware = createSagaMiddleware()


const store = createStore(reducer,applyMiddleware(logger,thunk,promise,sagaMiddleware));

// 动态执行saga,run函数需要在store创建之后调用
sagaMiddleware.run(rootSaga)

export default store;

saga/rootSage.js

import { call, put,takeEvery } from "redux-saga/effects";
import * as TYPES from '../action-types'
import actions from "../actions";

// const delay = function (ms) {
//     return new Promise((resolve, reject) => {
//       setTimeout(() => {
//         resolve(30)
//       }, ms)
//     })
//   }
export const delay = ms => new Promise((resolve, reject) => setTimeout(() => {
    resolve(30)
}, ms))
/**
* 通过action 接收传递的参数
*/
function* asyncSaga(action) {
    const data = yield call(delay, 3000);
    console.log(action,data)
    // yield put({ type: TYPES.VOTE_SUPPORT, payload: data })
    yield put(actions.vote.support(action.payload))
}

export default function* rootSaga() {
    console.log('启动saga')
    yield takeEvery(TYPES.VOTE_ASYNC, asyncSaga)
}

action-types.js

/** 宏定义 */
// vote模块
export const VOTE_SUPPORT = 'VOTE_SUPPORT';
export const VOTE_OPPOSE = 'VOTE_OPPOSE';
// 异步saga
export const VOTE_ASYNC = 'VOTE_ASYNC';
// user模块

voteAction.js

import * as TYPES from '../action-types'

const voteAction = {
    support(payload) {
        // setTimeout(() => {
        //     return {
        //         type: TYPES.VOTE_SUPPORT,
        //         payload
        //     }
        // }, 1000)
        // redux-thunk中间件的使用
        // return dispatch => {
        //     setTimeout(() => {
        //         dispatch(
        //             {
        //                 type: TYPES.VOTE_SUPPORT,
        //                 payload
        //             }
        //         )

        //     }, 1000)
        // }
        // redux-promise中间件的使用,返回的负荷属性必须用payload,用其他的属性不好用
        // return {
        //     type: TYPES.VOTE_SUPPORT,
        //     payload: new Promise((resolve, reject) => {
        //         setTimeout(_ => {
        //             resolve(payload)
        //         }, 1000)
        //     })
        // }
        return {
            type: TYPES.VOTE_SUPPORT,
            payload
        }

    },
    oppose(payload) {
        return {
            type: TYPES.VOTE_OPPOSE,
            payload
        }
    },
    asyncSupport(payload) {
        return {
            type: TYPES.VOTE_ASYNC,
            payload
        }
    }
}

export default voteAction;

VoteFooter.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from '../store/actions'
class VoteFooter extends Component {
    render() {
        const { support, oppose, asyncSupport } = this.props
        return (
            <div>
                <button onClick={() => support(10)}>支持</button>
                <button onClick={() => oppose(5)}>反对</button>
                // 测试saga 并传递参数
                <button onClick={() => asyncSupport(20)}>异步支持</button>
            </div>
        )
    }
    handler = type => {
        const { support, oppose } = this.props
        if (type === 0) {
            support(10)
            return
        }
        oppose(5)
    }
}
// 函数形式
// const mapDispatchToProps = dispatch => {
//     return {
//         support(payload) {
//             dispatch(action.vote.support(payload))
//         },
//         oppose(payload) {
//             dispatch(action.vote.oppose(payload))
//         }
//     }
// }
// 对象形式
// action.vote= {
//     support(payload) {
//         return {
//             type: TYPES.VOTE_SUPPORT,
//             payload
//         }
//     },
//     oppose(payload) {
//         return {
//             type: TYPES.VOTE_OPPOSE,
//             payload
//         }
//     }
// }
export default connect(null, action.vote)(VoteFooter);

至此 数据共享的异步和同步方案全部分享完毕，有不妥之处还请见谅。

敲出真谛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React里的数据管理
weixin_50545498的博客
12-30 209
React里的数据管理
初识react中新增的reportWebVitals.js文件
qiuqiu1894的博客
04-05 9158
react学习
react中新增了reportWebVitals有什么作用
weixin_39838846的博客
02-07 5045
reportWebVitals.js 中有如下代码： const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getF
新一代性能指标 Web Vitals
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-29 3757
点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料新一代性能指标 Web Vitals什么是 Web Vitals ？Web Vitals...
二、react安装前端性能检测工具 --- Web Vitals
xiaodouxuan11的博客
06-01 988
安装前端性能检测工具 --- Web Vitals
React学习笔记之高阶组件应用
08-27
1. **代码复用**：HOCs可以封装共享的逻辑，比如数据处理、权限控制、主题切换等，使得这些逻辑能在多个组件中复用。 2. **保持组件关注点分离**：HOC可以帮助你把复杂组件分解成更小、更专注的组件，保持代码的清晰...
ReactLearn:React学习基础笔记
05-10
ReactLearn是针对React的基础学习笔记，旨在帮助初学者理解并掌握React的核心概念和技术。在ReactLearn-master这个压缩包中，可能包含了完整的React项目源码、教程文档和其他相关资源，这将是一个非常有价值的自学...
react基础与进阶部分笔记
03-18
本笔记将涵盖React的基础概念以及进阶特性，帮助你深入理解React的工作原理。 1. **React组件**：React的核心理念是组件化，将UI拆分为可复用的独立单元。每个组件都有自己的状态和属性，可以接收父组件传递的数据...
Course-Notes-React:React课程笔记
03-12
《React课程笔记》 React是目前最流行的前端开发框架之一，由Facebook开发并维护，用于构建用户界面，尤其是单页应用程序。本课程笔记将深入探讨React的基础知识、核心概念以及实际应用。 一、React入门 1. **...
尚硅谷教程React视频.txt
10-08
其中，Redux是最为流行的状态管理库之一，它提供了一种集中式的全局状态管理机制，使得跨组件共享状态变得更加容易。 #### Hooks Hooks是React 16.8版本引入的新功能，它允许开发者在不编写类组件的情况下使用state...
web-vitals-demo:Web Vitals演示站点（https
04-17
Web Vitals演示网站 一个简单的Web前端，用于演示使用跟踪网站性能问题。 该代码托管在GitHub页面上： : 本地运行 要在本地运行站点： yarn install yarn start 要将最新代码部署到GitHub pages项目站点： yarn deploy
web-vitals-extension：Chrome扩展程序，用于衡量运行状况良好的网站的基本指标
02-22
Web Vitals Chrome扩展程序（alpha） Chrome扩展程序可衡量正常站点的指标立即 此扩展程序以与Chrome测量和向其他Google工具（例如， ， ）的方式相匹配的方式，来测量三个指标。 它支持所有并利用的库来捕获： 安装说明 可以从安装Web Vitals Chrome扩展。 如果您正在寻找更先进的构建，还可以从master安装扩展版本。 从主安装 谷歌浏览器 以下载此。 解压缩该文件，您应该有一个名为web-vitals-extension-master的文件夹。 在Chrome浏览器中，转到扩展程序页面（ chrome://extensions ）。 启用开发人员模式。 将web-vitals-extension-master文件夹web-vitals-extension-master页面上的任何位置以将其导入（此后请勿删除该文件夹）。 用
推荐：Web Vitals Report - 可定制的性能数据可视化工具
最新发布
gitblog_00006的博客
05-21 271
推荐：Web Vitals Report - 可定制的性能数据可视化工具 web-vitals-reportMeasure and report on your Web Vitals data in Google Analytics项目地址:https://gitcode.com/gh_mirrors/we/web-vitals-report 在数字化时代，网站性能对用户体验和业务成功至关重要。...
前端性能检测工具 --- Web Vitals
柒月
02-19 7739
最近在用react搭建项目，发现react的脚手架升级了，在项目根目录下发现了一个新的文件 – reportWebVitals.js。很好奇这是个啥。 reportWebVitals.js内容如下： const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID,
前端性能优化之发现问题
weixin_44384273的博客
07-31 212
前端性能优化之发现问题
qiankun框架
chenxiaoyu_927的博客
02-21 254
qiankun框架的搭建
React项目启动报错 ./src/reportWebVitals.js Module not found: Can‘t resolve ‘web-vitals‘ in ‘C:
xm1037782843的博客
09-16 1870
错误提示： "/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals' in 'E:\ReactResources\RectProjects\test-app\src'" 1 2 原因： 无法编译 -/src/reportWebVitals.js 找不到模块：无法解析“web-vitals”。 解决办法： 需要安装 Web Vitals。打开终端并运行以下命令： npm i web-vitals --save-dev .
使用 web-vitals 监控 web app 的性能
xunmi08的博客
03-12 1662
使用 web-vitals 监控 web app 的性能 本文经作者授权转载，原文作者：HD Superman，原文链接：使用 web-vitals 监控 web app 的性能 是什么？ Vitals 英汉翻译: n. 命脉（vital的复数）；（人体的）重要器官；要害 网络释义: vitals: 重要器官 Striking the Vitals: 攻其要害 web vitals 指的是一些关键指标，可以用来量化网页的用户体验，定义如何改进网页的质量（这是 google 推出的用户体验量化指标）。从
页面加载性能之Web Vitals
热门推荐
找到Web
08-03 1万+
Web Vitals是Google的一项重大举措，旨在为质量信号提供统一的指导，这对于在Web上提供出色的用户体验来说很重要。 网站的开发者需要了解自己的网站给用户带来的体验，但不一定要成为性能优化的专家。Web Vitals旨在简化流程，并帮助网站开发者聚焦在核心性能指标上，也称为Core Web Vitals。 Core Web Vitals Core Web Vitals是Web Vitals的一个子集，适用于所有网页，应该被所有开发者去进行测量，也将在所有Google提供的工具中浮现。每一个Core
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用各种React组件生命周期方法来控制组件的行为。同时，整合ESLint插件可以帮助我们在开发过程中规范代码风格和提高代码质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值