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

React 面向組件編程（下）

2年前作者：清風(fēng) 與我分類：Toy博客閱讀(30)違法舉報(bào)

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

前言：

在React面向組件編程中，除了上一章節(jié)的組件實(shí)例的三大核心屬性以外，還有很多重要的內(nèi)容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會(huì)給大家繼續(xù)講解React 面向組件編程中剩余的內(nèi)容。

一、受控組件與非受控組件

表單的組件分類：

受控組件

非受控組件

多數(shù)情況下，推薦使用受控組件實(shí)現(xiàn)表單。在受控組件中，表單數(shù)據(jù)由組件控制。
另外一種是非受控組件，這種方式下表單組件由DOM自身控制。

1. 受控組件

受控組件通過(guò) props 獲取其當(dāng)前值，并通過(guò)回調(diào)函數(shù)(比如 onChange )通知變化
表單狀態(tài)發(fā)生變化時(shí)，都會(huì)通知 React，將狀態(tài)交給 React 進(jìn)行處理，比如可以使用 useState 存儲(chǔ)
受控組件中，組件渲染出的狀態(tài)與它的 value 或 checked 屬性相對(duì)應(yīng)
受控組件會(huì)更新 state 的流程

class Login extends React.Component {
    // 初始化狀態(tài)
    state = {
        username:'', // 用戶名
        password:'', // 密碼
    }
    // 保存用戶名到狀態(tài)中
    saveUsername=(event)=>{
        this.setState({username:event.target.value})
    }
    // 保存密碼到狀態(tài)中
    savePassword=(event)=>{
        this.setState({password:event.target.value})
    }
    // 表單提交的回調(diào)
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默認(rèn)事件
        
        let {username,password} = this.state
        alert(`你輸入的用戶名是${username},密碼是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用戶名：<input type="text" onChange={this.saveUsername} name="username" />    
                    密碼：<input type="text" onChange={this.savePassword} name="password" />
                    <button type="submit">登錄</button>  
                </form>
            </div>
        )
    }
}

2. 非受控組件

非受控組件將數(shù)據(jù)存儲(chǔ)在 DOM 中，而不是組件內(nèi)，這比較類似于傳統(tǒng)的 HTML 表單元素。

非受控組件的值不受組件自身的 state 和 props 控制
非受控組件使用 ref 從 DOM 中獲取元素?cái)?shù)據(jù)

class Login extends React.Component {
    handleSubmit=(event)=>{
        // console.log(e>=event)
        event.preventDefault(); // 阻止默認(rèn)事件
        
        let {username,password} = this
        alert(`你輸入的用戶名是${username.value},密碼是${password.value}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用戶名：<input type="text" ref={c=>this.username = c} name="username" />    
                    密碼：<input type="text" ref={c=>this.password = c} name="password" />
                    <button type="submit">登錄</button>  
                </form>
            </div>
        )
    }
}

3. 效果展示

React 面向組件編程（下）,React,react.js,javascript,前端

4. 總結(jié)：

React 中的組件分為受控組件和非受控組件
受控組件的兩個(gè)要點(diǎn)：
- 組件的 value 屬性與 React 中的狀態(tài)綁定
- 組件內(nèi)聲明了 onChange 事件處理 value 的變化
非受控組件更像是傳統(tǒng)的 HTML 表單元素，數(shù)據(jù)存儲(chǔ)在 DOM 中，而不是組件內(nèi)部，獲取數(shù)據(jù)的方式是通過(guò) ref 引用
一些建議：
- 盡可能使用受控組件
- 受控組件是將狀態(tài)交由 React 處理，可以是任何元素，不局限于表單元素
- 對(duì)于有大量表單元素的頁(yè)面，使用受控組件會(huì)使程序變得繁瑣難控，此時(shí)使用非受控組件更為明智
- 在受控組件中，數(shù)據(jù)流是單向的( state 是變化來(lái)源)，因此在改變 state 時(shí)都應(yīng)該使用 setState ，而不要強(qiáng)制賦值
- Refs 不能用于函數(shù)式組件，因?yàn)楹瘮?shù)式組件沒(méi)有實(shí)例
- 在函數(shù)式組件內(nèi)部，是可以使用 Refs 的

二、組件的生命周期

所謂的React生命周期，就是指組件從被創(chuàng)建出來(lái)，到被使用，最后被銷毀的這么一個(gè)過(guò)程；
而在這個(gè)過(guò)程中，React提供了我們會(huì)自動(dòng)執(zhí)行的不同的鉤子函數(shù)，我們稱之為生命周期函數(shù)；

組件的生命周期大致分為三個(gè)階段：組件掛載階段，組件更新階段，組件銷毀卸載階段

react在版本16.3前后存在兩套生命周期，16.3之前為舊版，之后則是新版，雖有新舊之分，但主體上大同小異。

1. 對(duì)生命周期的理解

組件從創(chuàng)建到死亡它會(huì)經(jīng)歷一些特定的階段。
React組件中包含一系列勾子函數(shù)(生命周期回調(diào)函數(shù)), 會(huì)在特定的時(shí)刻調(diào)用。
我們?cè)诙x組件時(shí)，會(huì)在特定的生命周期回調(diào)函數(shù)中，做特定的工作。

2. 生命周期的三個(gè)階段（舊）

React 面向組件編程（下）,React,react.js,javascript,前端

初始化階段： 由ReactDOM.render()觸發(fā)—初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()
更新階段： 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render()
4. componentDidUpdate()
卸載組件： 由ReactDOM.unmountComponentAtNode()觸發(fā)
1. componentWillUnmount()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期舊</title>
</head>
<body>
    <!-- 準(zhǔn)備好一個(gè)容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心庫(kù) -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>

    <!-- 引入babel：
            1. ES6 ==> ES5
            2. jsx ==> js
    -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 獲取原狀態(tài)
                let {count} = this.state
                // 更新?tīng)顟B(tài)
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 強(qiáng)制更新
            }
            // 數(shù)據(jù)更新的 ‘閥門(mén)~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 這里必須有返回4值，其次返回值默認(rèn)是true
            }
            // 組件將要更新的鉤子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 組件更新完成的鉤子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>當(dāng)前求和為：{count}</h2>
                        <button onClick={this.add}>點(diǎn)我+1</button>
                        <button onClick={this.death}>卸載組件</button>
                        <button onClick={this.force}>不更改任何狀態(tài)中的數(shù)據(jù)，強(qiáng)制更新</button>
                    </div>
                )
            }
        }

        // 父組件
        class A extends React.Component {
            state = {carName:'小三輪'}
            changeCar = ()=>{
                this.setState({carName:"賓利"})
            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A組件</div>
                        <button onClick={this.changeCar}>換車</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子組件
        class B extends A {
            // 組件將要接收新的props的鉤子
            componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 數(shù)據(jù)更新的 ‘閥門(mén)~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 這里必須有返回4值，其次返回值默認(rèn)是true
            }
            // 組件將要更新的鉤子
            componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 組件更新完成的鉤子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B組件，接收到的車是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

3. 生命周期的三個(gè)階段（新）

React 面向組件編程（下）,React,react.js,javascript,前端

初始化階段： 由ReactDOM.render()觸發(fā)—初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()
更新階段： 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
卸載組件： 由ReactDOM.unmountComponentAtNode()觸發(fā)
1. componentWillUnmount()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期新</title>
</head>
<body>
    <!-- 準(zhǔn)備好一個(gè)容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心庫(kù) -->
    <script src="../js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/17.0.1/react-dom.development.js"></script>
    <!-- 引入babel：1. ES6 ==> ES52. jsx ==> js -->
    <script src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 獲取原狀態(tài)
                let {count} = this.state
                // 更新?tīng)顟B(tài)
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 強(qiáng)制更新
            }
            // 數(shù)據(jù)更新的 ‘閥門(mén)~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 這里必須有返回4值，其次返回值默認(rèn)是true
            }
            // 組件將要更新的鉤子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 組件更新完成的鉤子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>當(dāng)前求和為：{count}</h2>
                        <button onClick={this.add}>點(diǎn)我+1</button>
                        <button onClick={this.death}>卸載組件</button>
                        <button onClick={this.force}>不更改任何狀態(tài)中的數(shù)據(jù)，強(qiáng)制更新</button>
                    </div>
                )
            }
        }

        // 父組件
        class A extends React.Component {
            state = {carName:'小三輪'}
            
            constructor(props) {
                state
            }
            changeCar = ()=>{
                this.setState({carName:"賓利"})
            }
            static getDerivedStateFromProps(props, state) {
                // 這里必須要一個(gè)返回值 ==> state or null
                // 這里的state會(huì)覆蓋掉原本的狀態(tài)，并且后續(xù)也無(wú)法修改
                // 能將外部的接收的props 賦值給組件自身的 state
                // 如果你希望自身的state一直，全部依賴于外部的props，那么可以使用這個(gè)生命周期函數(shù)
                return {carName:"QQ"}
            }
            // 獲取護(hù)具更新前的快照，能拿到舊的props和state
            // 必須有返回值
            getSnapshotBeforeUpdate = (prevProps, prevState) => {

            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A組件</div>
                        <button onClick={this.changeCar}>換車</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子組件
        class B extends A {
            // 組件將要接收新的props的鉤子
            UNSAFE_componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 數(shù)據(jù)更新的 ‘閥門(mén)~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 這里必須有返回4值，其次返回值默認(rèn)是true
            }
            // 將要掛載時(shí)
            UNSAFE_componentWillMount() {
                console.log("Count --- componentWillUnMount");
            }
            // 組件將要更新的鉤子
            UNSAFE_componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 組件更新完成的鉤子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B組件，接收到的車是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

4. 新舊生命周期的區(qū)別

新生命周期中去掉了三個(gè) will 鉤子，分別為 componentWillMount、componentWillReceiveProps、componentWillUpdate；
新生命周期中新增了兩個(gè)鉤子，分別為 getDerivedStateFromProps（從 props 中得到衍生的 state ）和 getSnapshotBeforeUpdate。

5. 重要的勾子

render：初始化渲染或更新渲染調(diào)用
componentDidMount：開(kāi)啟監(jiān)聽(tīng), 發(fā)送ajax請(qǐng)求
componentWillUnmount：做一些收尾工作, 如: 清理定時(shí)器

6. 即將廢棄的勾子

componentWillMount
componentWillReceiveProps
componentWillUpdate

警告：

現(xiàn)在使用會(huì)出現(xiàn)警告，下一個(gè)大版本需要加上 UNSAFE_ 前綴才能使用，以后可能會(huì)被徹底廢棄，不建議使用。

三、高階函數(shù)和函數(shù)柯里化的理解

1. 高階函數(shù)

如果一個(gè)函數(shù)符合下面2個(gè)規(guī)范中的任何一個(gè)，那么它就屬于一個(gè)高階函數(shù)

若A函數(shù)，接收的參數(shù)是一個(gè)函數(shù)，那么A就可以稱為高階函數(shù)
若A函數(shù)，它的返回值依然是一個(gè)函數(shù)，那么A就可以稱為高階函數(shù)

常見(jiàn)的高階函數(shù)：Promise，setTimeout，arr.map(數(shù)組方法)

2. 函數(shù)的柯里化

通過(guò)函數(shù)繼續(xù)調(diào)用，返回值為函數(shù)的方式，實(shí)現(xiàn)多次接受參數(shù)，最后統(tǒng)一處理的函數(shù)編碼形式

function sum(a){
    return (b)=>{
        return (c)=>{
            return a + b + c
        }
    }
}
const result = sum(1)(2)(3)
console.log(result);

3. 使用函數(shù)柯里化代碼示例

class Login extends React.Component {
    // 初始化狀態(tài)
    state = {
        username:'', // 用戶名
        password:'', // 密碼
    }
    // 保存表單數(shù)據(jù)到狀態(tài)中
    saveFormDate=(dataType,event)=>{ // 標(biāo)識(shí)當(dāng)前標(biāo)簽
        this.setState({[dataType]:event.target.value})
    }
    // 表單提交的回調(diào)
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默認(rèn)事件
        
        let {username,password} = this.state
        alert(`你輸入的用戶名是${username},密碼是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用戶名：<input type="text" onChange={(event)=>this.saveFormDate('username',event)} name="username" />    
                    密碼：<input type="text" onChange={(event)=>this.saveFormDate('password',event)} name="password" />
                    <button type="submit">登錄</button>  
                </form>
            </div>
        )
    }
}

4. 不用函數(shù)柯里化代碼示例

class Login extends React.Component {
    // 初始化狀態(tài)
    state = {
        username:'', // 用戶名
        password:'', // 密碼
    }
    // 保存表單數(shù)據(jù)到狀態(tài)中
    saveFormDate=(dataType)=>{ // 標(biāo)識(shí)當(dāng)前標(biāo)簽
        return (event)=>{ // 這里的回調(diào)誰(shuí)執(zhí)行？ input標(biāo)簽的 onChange事件
            this.setState({[dataType]:event.target.value})
        }
    }
    // 表單提交的回調(diào)
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默認(rèn)事件
        
        let {username,password} = this.state
        alert(`你輸入的用戶名是${username},密碼是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用戶名：<input type="text" onChange={this.saveFormDate('username')} name="username" />    
                    密碼：<input type="text" onChange={this.saveFormDate('password')} name="password" />
                    <button type="submit">登錄</button>  
                </form>
            </div>
        )
    }
}

總結(jié)：

歡迎大家加入我的社區(qū)，在社區(qū)中會(huì)不定時(shí)發(fā)布一些精選內(nèi)容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 React 面向組件編程（下），不懂得也可以在評(píng)論區(qū)里問(wèn)我或私聊我詢問(wèn)，以后會(huì)持續(xù)發(fā)布一些新的功能，敬請(qǐng)關(guān)注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785063.html

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

本文來(lái)自互聯(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)用

JavaScript 框架比較：Angular、React、Vue.js
在 Web 開(kāi)發(fā)領(lǐng)域，JavaScript 提供大量技術(shù)棧可供選擇。其中最典型的三套組合，分別是 MERN、MEAN 和 MEVN。這些首字母相同的選項(xiàng)各自代表不同的技術(shù)加工具組合。為了在這些技術(shù)棧中做出明智選擇，讓我們先從核心組件聊起，再對(duì)各自前端框架（React、Angular 和 Vue）進(jìn)行簡(jiǎn)化比
2024年01月20日
瀏覽(36)
前端react入門(mén)day02-React中的事件綁定與組件
(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）目錄 React中的事件綁定 React 基礎(chǔ)事件綁定使用事件對(duì)象參數(shù)? 傳遞自定義參數(shù)? 同時(shí)傳遞事件對(duì)象和自定義參數(shù)? React中的組件? 組件是什么 React組件 useState? 修改狀態(tài)的規(guī)
2024年02月06日
瀏覽(24)
前端react入門(mén)day03-react獲取dom與組件通信
(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）目錄受控表單綁定? React中獲取DOM 組件通信父?jìng)髯? 父?jìng)髯?基礎(chǔ)實(shí)現(xiàn) 父?jìng)髯?props說(shuō)明父?jìng)髯?- 特殊的prop children 子傳父? 使用狀態(tài)提升實(shí)現(xiàn)兄弟組件通信使用Context機(jī)制跨
2024年02月01日
瀏覽(24)
從javascript到vue再到react：前端開(kāi)發(fā)框架的演變
目錄 JavaScript: 動(dòng)態(tài)語(yǔ)言的基礎(chǔ) JavaScript：Web開(kāi)發(fā)的起點(diǎn) Vue.js: 漸進(jìn)式框架的興起 Vue.js：簡(jiǎn)潔、高效的前端框架 React.js: 聲明式UI的革新 React.js：強(qiáng)大、靈活的前端框架演變之路與未來(lái)展望演變過(guò)程當(dāng)提到前端開(kāi)發(fā)中的框架時(shí)，JavaScript、Vue.js和React.js是三個(gè)最常見(jiàn)的名詞。它
2024年02月07日
瀏覽(34)
前端開(kāi)發(fā)筆記｜ React Hooks子組件和父組件交互
前端開(kāi)發(fā)框架目前比較常用的就是react、vue等，其中使用React Hooks 帶來(lái)了不少的好處，今天來(lái)聊聊React Hooks開(kāi)發(fā)方式下，子組件和父組件的交互。子組件定義父組件調(diào)用子組件父組件定義子組件中刷新父組件按鈕文案實(shí)際效果：點(diǎn)擊子組件中“改變父組件按鈕”，父組件中
2024年02月11日
瀏覽(15)
【前端知識(shí)】React 基礎(chǔ)鞏固(十九)——組件化開(kāi)發(fā)（三）
Main.jsx TabControl/index.jsx TabControl/style.css
2024年02月13日
瀏覽(28)
前端（十五）——開(kāi)源一個(gè)用react封裝的圖片預(yù)覽組件
??博主：小貓娃來(lái)啦 ??文章核心：開(kāi)源一個(gè)react封裝的圖片預(yù)覽組件 Gitee：點(diǎn)此跳轉(zhuǎn)下載 CSDN：點(diǎn)此跳轉(zhuǎn)下載裝依賴運(yùn)行打開(kāi) 創(chuàng)建一個(gè)React函數(shù)組件并命名為 ImageGallery 。在組件內(nèi)部，使用useState鉤子來(lái)定義狀態(tài)變量，并初始化為合適的初始值。 selectedImageUrl 來(lái)追蹤當(dāng)前選
2024年02月10日
瀏覽(27)
【前端知識(shí)】React 基礎(chǔ)鞏固(十七)——組件化開(kāi)發(fā)（一）
什么是組件化開(kāi)發(fā)？分而治之的思想將一個(gè)頁(yè)面拆分成一個(gè)個(gè)小的功能塊將應(yīng)用抽象成一顆組件樹(shù) React的組件相對(duì)于Vue更加的靈活和多樣按照不同的方式可以分為很多類組件根據(jù) 組件的定義方式，分為：函數(shù)組件、類組件根據(jù) 組件內(nèi)部是否有狀態(tài)需要維護(hù) ，分為：
2024年02月12日
瀏覽(55)
JavaScript框架 Angular、React、Vue.js 的全棧解決方案比較
在 Web 開(kāi)發(fā)領(lǐng)域，JavaScript 提供大量技術(shù)棧可供選擇。其中最典型的三套組合，分別是 MERN、MEAN 和 MEVN。前端框架（React、Angular 和 Vue）進(jìn)行簡(jiǎn)化比較。 MERN 技術(shù)棧包含四大具體組件： MongoDB：一款強(qiáng)大的 NoSQL 數(shù)據(jù)庫(kù)，以靈活的 JSON 格式存儲(chǔ)數(shù)據(jù)。 Express.js：一套極簡(jiǎn)但強(qiáng)大的
2024年02月03日
瀏覽(32)
Three.js 的組件庫(kù)react-three-fiber和react-three-drei
類似于這種字體，可以用Text或者Text3d，但是要處理一個(gè)問(wèn)題，就是要保證字體一直正面視角。這中間的處理比較的麻煩，于是可以使用react-three-drei中的Html來(lái)做這件事
2024年01月24日
瀏覽(21)