国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

步入React正殿 - State進(jìn)階

2年前作者：路人i++分類：Toy博客閱讀(18)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了步入React正殿 - State進(jìn)階。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

目錄

擴(kuò)展學(xué)習(xí)資料

State進(jìn)階知識(shí)點(diǎn)

狀態(tài)更新擴(kuò)展

shouldComponentUpdate

PureComponent

為何使用不變數(shù)據(jù)【保證數(shù)據(jù)引用不會(huì)出錯(cuò)】

?單一數(shù)據(jù)源

?@/src/App.js

@/src/components/listItem.jsx

狀態(tài)提升

?@/src/components/navbar.jsx

@/src/components/listPage.jsx

@src/App.js

有狀態(tài)組件&無狀態(tài)組件

Stateful【有狀態(tài)】和Stateless【無狀態(tài)】的區(qū)別

Stateful

Stateless

小結(jié)

練習(xí)

擴(kuò)展學(xué)習(xí)資料

預(yù)習(xí)資料名稱?

鏈接

備注

不可變數(shù)據(jù)

https://github.com/immutable-js/immutable-js

無

JS內(nèi)存管理

內(nèi)存管理 - JavaScript | MDN

無

狀態(tài)提升

mangojuice.top?-?該網(wǎng)站正在出售！?-?mangojuice 資源和信息。

擴(kuò)展閱讀

context管理狀態(tài)

http://react.html.cn/docs/context.html ?

聊一聊我對(duì) React Context 的理解以及應(yīng)用 - 掘金

擴(kuò)展閱讀

State進(jìn)階知識(shí)點(diǎn)

  • 通過條件判斷優(yōu)化渲染
  • 使用不可變數(shù)據(jù)
  • 狀態(tài)提升
  • 使用無狀態(tài)組件

狀態(tài)更新擴(kuò)展

阻止不必要的render方法執(zhí)行

shouldComponentUpdate

// render渲染執(zhí)行前調(diào)用的函數(shù),返回false,可以有效的阻止不必要的render方法執(zhí)行
? shouldComponentUpdate(nextProps, nextState) {
? ? console.log('props', this.props, nextProps);
? ? console.log('state', this.state, nextState);
    if(this.state.count === nextState.count) {
        return false
    }
    if(this.props.id === nextProps.id) {
        return false
    }
    return true
? }

PureComponent

import React, { PureComponent } from 'react';
class ListItem extends PureComponent {}

為何使用不變數(shù)據(jù)【保證數(shù)據(jù)引用不會(huì)出錯(cuò)】

// ...
handleDelete = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? const listData = this.state.listData.filter((item) => item.id !== id);
? ? this.setState({
? ? ? listData,
? ? });
? };
? handleAmount = () => {
? ? // 如不使用新的數(shù)組【沒有使用不可變數(shù)據(jù)】, state變化，不會(huì)重新渲染UI
? ? //
? ? const _list = this.state.listData.concat([]);
? ? /* 
? ? ? pop() 方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。
? ? ? 注意：此方法改變數(shù)組的長(zhǎng)度！
? ? ? 提示： 移除數(shù)組第一個(gè)元素，請(qǐng)使用 shift() 方法。
? ? */
? ? _list.pop();
? ? this.setState({
? ? ? listData: _list,
? ? });
? };
// ...

如下圖，如果沒有創(chuàng)建新的引用，在PureComponent中，不會(huì)調(diào)用render

步入React正殿 - State進(jìn)階,React相關(guān),react.js,前端,前端框架

?如下圖，使用不可變數(shù)據(jù)，可以避免引用帶來的副作用，使得整個(gè)程序數(shù)據(jù)變的易于管理

步入React正殿 - State進(jìn)階,React相關(guān),react.js,前端,前端框架

?單一數(shù)據(jù)源

handleReset = () => {
? ? // 使用map方法創(chuàng)建一個(gè)新的數(shù)組
? ? const _list = this.state.listData.map((item) => {
? ? ? // ... 解構(gòu)符
? ? ? const _item = { ...item };
? ? ? _item.value = 0;
? ? ? return _item;
? ? });
? ? this.setState({
? ? ? listData: _list,
? ? });
? ? // 此時(shí)props數(shù)據(jù)變化，子組件state.count沒變化
? ? // 原因出在沒有使用單一數(shù)據(jù)源
? };

步入React正殿 - State進(jìn)階,React相關(guān),react.js,前端,前端框架

?@/src/App.js

import React, { PureComponent } from 'react';
import ListItem from './components/listItem';
import ListItemFunc from './components/listItemFunc';
import style from './components/listitem.module.css';

// eslint-disable-next-line no-unused-vars
class App extends PureComponent {
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? listData: [
    ? {
    ? ? id: 1,
    ? ? name: 'sony 65寸高清電視',
    ? ? price: 4000,
    ? ? stock: 1,
    ? ? value: 4,
    ? },
    ? {
    ? ? id: 2,
    ? ? name: '華為 Meta30',
    ? ? price: 6000,
    ? ? stock: 12,
    ? ? value: 2,
    ? },
    ? {
    ? ? id: 3,
    ? ? name: '華碩 玩家國度筆記本',
    ? ? price: 10000,
    ? ? stock: 11,
    ? ? value: 1,
    ? }],
? 	 };
? }
? renderList() {
? ? return this.state.listData.map((item) => {
? ? ? return (
? ? ? ? <ListItem
? ? ? ? ? key={item.id}
? ? ? ? ? data={item}
? ? ? ? ? onDelete={this.handleDelete}
? ? ? ? ? onDecrease={this.handleDecrease}
? ? ? ? ? onAdd={this.handleAdd}
? ? ? ? />
? ? ? );
? ? });
? }
? handleDelete = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? const listData = this.state.listData.filter((item) => item.id !== id);
? ? this.setState({
? ? ? listData,
? ? });
? };
? handleDecrease = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? const _data = this.state.listData.map((item) => {
? ? ? if (item.id === id) {
? ? ? ? const _item = { ...item };
? ? ? ? _item.value--;
? ? ? ? if (_item.value < 0) _item.value = 0;
? ? ? ? return _item;
? ? ? }
? ? ? return item;
? ? });
? ? this.setState({
? ? ? listData: _data,
? ? });
? };
? handleAdd = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? console.log(id);
? ? const _data = this.state.listData.map((item) => {
? ? ? if (item.id === id) {
? ? ? ? const _item = { ...item };
? ? ? ? _item.value++;
? ? ? ? return _item;
? ? ? }
? ? ? return item;
? ? });
? ? this.setState({
? ? ? listData: _data,
? ? });
? };
? handleAmount = () => {
? ? // 如不使用新的數(shù)組【沒有使用不可變數(shù)據(jù)】, state變化，不會(huì)重新渲染UI
? ? //
? ? const _list = this.state.listData.concat([]);
? ? /* 
? ? ? pop() 方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。
? ? ? 注意：此方法改變數(shù)組的長(zhǎng)度！
? ? ? 提示： 移除數(shù)組第一個(gè)元素，請(qǐng)使用 shift() 方法。
? ? */
? ? _list.pop();
? ? this.setState({
? ? ? listData: _list,
? ? });
? };
? handleReset = () => {
? ? // 使用map方法創(chuàng)建一個(gè)新的數(shù)組
? ? const _list = this.state.listData.map((item) => {
? ? ? // ... 結(jié)構(gòu)符
? ? ? const _item = { ...item };
? ? ? _item.value = 0;
? ? ? return _item;
? ? });
? ? this.setState({
? ? ? listData: _list,
? ? });
? ? // 此時(shí)props數(shù)據(jù)變化，子組件state.count沒變化
? ? // 原因出在沒有使用單一數(shù)據(jù)源
? };
? render() {
? ? return (
? ? ? <div className='container'>
? ? ? ? <button onClick={this.handleAmount} className='btn btn-primary'>
? ? ? ? ? 減去最后一個(gè)
? ? ? ? </button>
? ? ? ? <button onClick={this.handleReset} className='btn btn-primary'>
? ? ? ? ? 重置
? ? ? ? </button>
? ? ? ? {this.state.listData.length === 0 && (
? ? ? ? ? <div className='text-center'>購物車是空的</div>
? ? ? ? )}
? ? ? ? {this.renderList()}
? ? ? </div>
? ? );
? }
}

export default App;

@/src/components/listItem.jsx

// import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import style from './listitem.module.css';
import classnames from 'classnames/bind';
const cls = classnames.bind(style);
class ListItem extends PureComponent {
? // 類的構(gòu)造函數(shù)
? // eslint-disable-next-line no-useless-constructor
? constructor(props) {
? ? super(props);
? }?
? render() {
? ? console.log('item is rendering');
? ? return (
? ? ? <div className='row mb-3'>
? ? ? ? <div className='col-4 themed-grid-col'>
? ? ? ? ? <span style={{ fontSize: 22, color: '#710000' }}>
? ? ? ? ? ? {this.props.data.name}
? ? ? ? ? </span>
? ? ? ? </div>
? ? ? ? <div className='col-1 themed-grid-col'>
? ? ? ? ? <span className={cls('price-tag')}>￥{this.props.data.price}</span>
? ? ? ? </div>
? ? ? ? <div
? ? ? ? ? className={`col-2 themed-grid-col${
? ? ? ? ? ? this.props.data.value ? '' : '-s'
? ? ? ? ? }`}>
? ? ? ? ? <button
? ? ? ? ? ? onClick={() => {
? ? ? ? ? ? ? this.props.onDecrease(this.props.data.id);
? ? ? ? ? ? }}
? ? ? ? ? ? type='button'
? ? ? ? ? ? className='btn btn-primary'>
? ? ? ? ? ? -
? ? ? ? ? </button>
? ? ? ? ? <span className={cls('digital')}>{this.props.data.value}</span>
? ? ? ? ? <button
? ? ? ? ? ? onClick={() => {
? ? ? ? ? ? ? this.props.onAdd(this.props.data.id);
? ? ? ? ? ? }}
? ? ? ? ? ? type='button'
? ? ? ? ? ? className='btn btn-primary'>
? ? ? ? ? ? +
? ? ? ? ? </button>
? ? ? ? </div>
? ? ? ? <div className='col-2 themed-grid-col'>
? ? ? ? ? ￥ {this.props.data.price * this.props.data.value}
? ? ? ? </div>
? ? ? ? <div className='col-1 themed-grid-col'>
? ? ? ? ? <button
? ? ? ? ? ? onClick={() => {
? ? ? ? ? ? ? this.props.onDelete(this.props.data.id);
? ? ? ? ? ? }}
? ? ? ? ? ? type='button'
? ? ? ? ? ? className='btn btn-danger btn-sm'>
? ? ? ? ? ? 刪除
? ? ? ? ? </button>
? ? ? ? </div>
? ? ? </div>
? ? );
? }
}
export default ListItem;

狀態(tài)提升

處理組件和子組件數(shù)據(jù)傳遞，自頂向下單向流動(dòng)

步入React正殿 - State進(jìn)階,React相關(guān),react.js,前端,前端框架

?@/src/components/navbar.jsx

import React, { PureComponent } from 'react';
class Nav extends PureComponent {
? render() {
? ? return (
? ? ? <nav className='navbar navbar-expand-lg navbar-light bg-light'>
? ? ? ? <div className='container'>
? ? ? ? ? <div className='wrap'>
? ? ? ? ? ? <span className='title'>NAVBAR</span>
? ? ? ? ? ? <span className='badge badge-pill badge-primary ml-2 mr-2'>
? ? ? ? ? ? ? {this.props.itemNum}
? ? ? ? ? ? </span>
? ? ? ? ? ? <button
? ? ? ? ? ? ? onClick={this.props.onReset}
? ? ? ? ? ? ? className='btn btn-outline-success my-2 my-sm-0 fr'
? ? ? ? ? ? ? type='button'>
? ? ? ? ? ? ? Reset
? ? ? ? ? ? </button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </nav>
? ? );
? }
}
export default Nav;

@/src/components/listPage.jsx

import React, { PureComponent } from 'react';
import ListItem from './listItem.jsx';
// 商品列表渲染
class ListPage extends PureComponent {
? renderList() {
? ? return this.props.data.map((item) => {
? ? ? return (
? ? ? ? <ListItem
? ? ? ? ? key={item.id}
? ? ? ? ? data={item}
? ? ? ? ? onDelete={this.props.handleDelete}
? ? ? ? ? onDecrease={this.props.handleDecrease}
? ? ? ? ? onAdd={this.props.handleAdd}
? ? ? ? />
? ? ? );
? ? });
? }
? render() {
? ? return (
? ? ? <div className='container'>
? ? ? ? {this.props.data.length === 0 && (
? ? ? ? ? <div className='text-center'>購物車是空的</div>
? ? ? ? )}
? ? ? ? {this.renderList()}
? ? ? </div>
? ? );
? }
}
export default ListPage;

@src/App.js

import React, { PureComponent } from 'react';
import Nav from './components/navbar';
import ListPage from './components/listPage';
const listData = [
? {
? ? id: 1,
? ? name: 'sony 65寸高清電視',
? ? price: 4000,
? ? stock: 1,
? ? value: 4,
? },
? {
? ? id: 2,
? ? name: '華為 Meta30',
? ? price: 6000,
? ? stock: 12,
? ? value: 2,
? },
? {
? ? id: 3,
? ? name: '華碩 玩家國度筆記本',
? ? price: 10000,
? ? stock: 11,
? ? value: 1,
? },
];
// eslint-disable-next-line no-unused-vars
class App extends PureComponent {
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? listData: listData,
? ? };
? }
? handleDelete = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? const listData = this.state.listData.filter((item) => item.id !== id);
? ? this.setState({
? ? ? listData,
? ? });
? };
? handleDecrease = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? const _data = this.state.listData.map((item) => {
? ? ? if (item.id === id) {
? ? ? ? const _item = { ...item };
? ? ? ? _item.value--;
? ? ? ? if (_item.value < 0) _item.value = 0;
? ? ? ? return _item;
? ? ? }
? ? ? return item;
? ? });
? ? this.setState({
? ? ? listData: _data,
? ? });
? };
? handleAdd = (id) => {
? ? // 使用不可變數(shù)據(jù), filter返回一個(gè)新數(shù)組
? ? console.log(id);
? ? const _data = this.state.listData.map((item) => {
? ? ? if (item.id === id) {
? ? ? ? const _item = { ...item };
? ? ? ? _item.value++;
? ? ? ? return _item;
? ? ? }
? ? ? return item;
? ? });
? ? this.setState({
? ? ? listData: _data,
? ? });
? };
? handleAmount = () => {
? ? // 如不使用新的數(shù)組【沒有使用不可變數(shù)據(jù)】, state變化，不會(huì)重新渲染UI
? ? //
? ? const _list = this.state.listData.concat([]);
? ? /* 
? ? ? pop() 方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。
? ? ? 注意：此方法改變數(shù)組的長(zhǎng)度！
? ? ? 提示： 移除數(shù)組第一個(gè)元素，請(qǐng)使用 shift() 方法。
? ? */
? ? _list.pop();
? ? this.setState({
? ? ? listData: _list,
? ? });
? };
? handleReset = () => {
? ? // 使用map方法創(chuàng)建一個(gè)新的數(shù)組
? ? const _list = this.state.listData.map((item) => {
? ? ? // ... 結(jié)構(gòu)符
? ? ? const _item = { ...item };
? ? ? _item.value = 0;
? ? ? return _item;
? ? });
? ? this.setState({
? ? ? listData: _list,
? ? });
? ? // 此時(shí)props數(shù)據(jù)變化，子組件state.count沒變化
? ? // 原因出在沒有使用單一數(shù)據(jù)源
? };
? render() {
? ? return (
? ? ? <>
? ? ? ? <Nav itemNum={this.state.listData.length} onReset={this.handleReset} />
? ? ? ? <ListPage
? ? ? ? ? data={this.state.listData}
? ? ? ? ? handleAdd={this.handleAdd}
? ? ? ? ? handleAmount={this.handleAmount}
? ? ? ? ? handleDecrease={this.handleDecrease}
? ? ? ? ? handleDelete={this.handleDelete}
? ? ? ? ? handleReset={this.handleReset}
? ? ? ? />
? ? ? </>
? ? );
? }
}
export default App;

有狀態(tài)組件&無狀態(tài)組件

Stateful【有狀態(tài)】和Stateless【無狀態(tài)】的區(qū)別

Stateful
  • 類組件
  • 有狀態(tài)組件
  • 容器組件
Stateless
  • 函數(shù)組件
  • 無狀態(tài)組件
  • 展示組件

盡可能通過狀態(tài)提升原則，將需要的狀態(tài)提取到父組件中，而其他的組件使用無狀態(tài)組件編寫【父組件有狀態(tài)，子組件無狀態(tài)】

無狀態(tài)組件簡(jiǎn)單好維護(hù)，單一從上而下的數(shù)據(jù)流

小結(jié)

  • 優(yōu)化渲染
  • 使用不可變數(shù)據(jù)
  • 單一數(shù)據(jù)源以及狀態(tài)提升
  • 無狀態(tài)組件寫法

練習(xí)

【題目1】?用單一數(shù)據(jù)源原則和狀態(tài)提升原則改造購物車工程

【題目2】 目前Header中顯示的是商品種類數(shù)量，改造成商品的總數(shù)目文章來源地址http://www.zghlxwxcb.cn/news/detail-650350.html

到了這里，關(guān)于步入React正殿 - State進(jìn)階的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 簡(jiǎn)介：在這篇教程中，我們將使用React.js框架創(chuàng)建一個(gè)簡(jiǎn)單的聊天機(jī)器人的前端界面，并利用Dialogflo

    作者：禪與計(jì)算機(jī)程序設(shè)計(jì)藝術(shù) 介紹及動(dòng)機(jī) 聊天機(jī)器人（Chatbot）一直是互聯(lián)網(wǎng)領(lǐng)域中的熱門話題。而很多聊天機(jī)器人的功能都依賴于人工智能（AI）技術(shù)。越來越多的企業(yè)希望擁有自己的聊天機(jī)器人系統(tǒng)，從而提升自己的競(jìng)爭(zhēng)力。為此，業(yè)界也出現(xiàn)了很多基于開源技術(shù)或云

    2024年02月06日
    瀏覽(25)

  • 【前端知識(shí)】React 基礎(chǔ)鞏固(二十三)——React 性能優(yōu)化 SCU相關(guān)

    React 的渲染流程 JSX - 虛擬 DOM - 真實(shí) DOM React 的更新流程 props/state 改變 - render函數(shù)重新執(zhí)行 - 產(chǎn)生新的DOM樹 - 新舊DOM樹進(jìn)行diff - 計(jì)算出差異進(jìn)行更新 - 更新到真實(shí)的DOM React 在 props 或 state 發(fā)生改變時(shí)，會(huì)調(diào)用 React 的 render 方法，會(huì)創(chuàng)建一顆不同的樹 React 需要基于這兩顆不同的

    2024年02月15日
    瀏覽(38)

  • 前端框架學(xué)習(xí)-React（一）

    React 應(yīng)用程序是由 組件 組成的。 react 程序是用的jsx語法，使用這種語法的代碼需要由babel進(jìn)行解析，解析成js代碼。 jsx語法： 只能返回一個(gè)根元素 所有的標(biāo)簽都必須閉合（自閉和或使用一對(duì)標(biāo)簽的方式閉合） 使用駝峰式命名法給大部分屬性命名如：className 大寫字母開頭的

    2024年02月12日
    瀏覽(33)
  • 前端框架 Nextjs React 部署

    前端框架 Nextjs React 部署

    目錄 一、node環(huán)境部署 二、靜態(tài)導(dǎo)出 補(bǔ)充：路由問題 Nextjs打包還是非常方便的，就是網(wǎng)上資料不太全，導(dǎo)致踩了一些坑，下面是我親自實(shí)踐的兩種打包方式。 一、node環(huán)境部署 這種方式最簡(jiǎn)單，也比較不容易出錯(cuò)，但部署時(shí)服務(wù)器需安裝有node環(huán)境，速度沒話說，杠杠的! 構(gòu)

    2024年02月12日
    瀏覽(23)

  • 丁鹿學(xué)堂：前端學(xué)習(xí)進(jìn)階指南之react入門（react在html中使用數(shù)據(jù)綁定和修改）

    在html中使用react 今天跟大家分享react的基礎(chǔ)語法。 我們采用最簡(jiǎn)單的方法，就是在html中引入react 因?yàn)橐簧蟻砭褪褂媚_手架的話，很多配置大家不一定清楚。 而在html中使用react的話，可以直接去學(xué)習(xí)react最基本的語法。 這是零基礎(chǔ)學(xué)習(xí)react的最佳實(shí)踐。 引入react的依賴 react也

    2024年02月14日
    瀏覽(23)
  • Vue 和 React 前端框架的比較

    Vue 和 React 前端框架的比較

    本文研究了流行的前端框架 Vue 和 React 之間的區(qū)別。通過對(duì)它們的學(xué)習(xí)曲線、視圖層處理方式、組件化開發(fā)、響應(yīng)式數(shù)據(jù)處理方式和生態(tài)系統(tǒng)及社區(qū)支持進(jìn)行比較分析，得出了它們?cè)诓煌矫娴膬?yōu)劣和特點(diǎn)。該研究對(duì)于開發(fā)者在選擇合適的前端框架時(shí)提供參考。 Vue 是一款由

    2024年02月13日
    瀏覽(24)

  • React與Vue：前端框架的比較

    在前端開發(fā)領(lǐng)域，React和Vue是兩個(gè)備受矚目的框架。它們都提供了構(gòu)建用戶界面的強(qiáng)大工具，但它們?cè)趯?shí)現(xiàn)方式、性能和設(shè)計(jì)理念上存在一些關(guān)鍵差異。本文將深入探討這兩個(gè)框架之間的主要區(qū)別。 首先，讓我們從數(shù)據(jù)流的角度來看。在Vue中，數(shù)據(jù)流是雙向的，這意味著組件

    2024年01月20日
    瀏覽(16)
  • 前端（七）——React框架的定位與應(yīng)用場(chǎng)景解析

    前端（七）——React框架的定位與應(yīng)用場(chǎng)景解析

    ??博主：小貓娃來啦 ??文章核心： React框架的定位與應(yīng)用場(chǎng)景解析 什么是react？ React 是一個(gè)由 Facebook 開發(fā)的開源 JavaScript庫，用于構(gòu)建用戶界面。 于2013年首次發(fā)布，并迅速成為前端開發(fā)中最受歡迎的框架之一。 在 React 誕生之前，前端開發(fā)面臨著許多挑戰(zhàn)，包括復(fù)雜的D

    2024年02月17日
    瀏覽(16)

  • JavaScript 框架比較：Angular、React、Vue.js

    在 Web 開發(fā)領(lǐng)域，JavaScript 提供大量技術(shù)?？晒┻x擇。其中最典型的三套組合，分別是 MERN、MEAN 和 MEVN。這些首字母相同的選項(xiàng)各自代表不同的技術(shù)加工具組合。為了在這些技術(shù)棧中做出明智選擇，讓我們先從核心組件聊起，再對(duì)各自前端框架（React、Angular 和 Vue）進(jìn)行簡(jiǎn)化比

    2024年01月20日
    瀏覽(36)

  • 前端開發(fā)框架生命周期詳解：Vue、React和Angular

    作為前端開發(fā)者，掌握前端開發(fā)框架的生命周期是非常重要的。在現(xiàn)代Web應(yīng)用開發(fā)中，Vue.js、React和Angular是三個(gè)最流行的前端開發(fā)框架。本篇博客將詳細(xì)解讀這三個(gè)框架的生命周期，包括每個(gè)階段的含義、用途以及如何最大限度地利用它們。通過詳細(xì)的代碼示例和實(shí)用的技巧

    2024年02月13日
    瀏覽(27)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包