react?component?function組件使用詳解

更新時(shí)間：2022年11月01日 10:37:26 作者：霍格沃茨魔法師

這篇文章主要為大家介紹了react?component?function組件的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

不可改變性

1.jsx-

2.component(function)-component(class)-components(函數(shù)組件組合)-component tree(redux)-app(項(xiàng)目開發(fā))

在react中，創(chuàng)建了js對象（react元素）就是不可更改的（immutable）。就像是用相機(jī)拍照，相當(dāng)于在此時(shí)間點(diǎn)已經(jīng)定位了時(shí)間節(jié)點(diǎn)，只能拍下一張照片。

例如，使用底層react寫一個(gè)時(shí)鐘。

<div id="app"></div>
new Date().toLocalTimeString() //獲取當(dāng)前時(shí)間
var e =  <h1>time:{new Date().toLocaleTimeString()}</h1>
ReactDOM.render(e,document.getElementById("app"))

以上，無法實(shí)時(shí)更新最新的時(shí)間。

但是換種方法寫：

  function tick() {
            //創(chuàng)建新的元素，同步元素到容器。
            var e = <div>
                <h1>Clock</h1>
                <h1>time:{new Date().toLocaleTimeString()}</h1>
            </div>
            // e1 e2,虛擬dom之間的比較，看看到底哪里發(fā)生了變化。
            //同步到容器元素
            ReactDOM.render(e, document.getElementById("app"))
        }
       setTimeout(tick(), 1000);

虛擬dom與真實(shí)dom

創(chuàng)建元素并打印

已知jsx語法創(chuàng)建的本質(zhì)就是普通js對象，打印的結(jié)果為虛擬dom。

例如

 var e = <div className="title" style={{ color: "red" }}>hello</div>
 打印e。

但如果打印真實(shí)dom

var tDOM = document.querySelector('title');
console.dir(tDOM)

獲得的結(jié)果為

由此可見，虛擬dom比真實(shí)dom的開銷要小，這也是瀏覽器中性能優(yōu)化方法之一，減少重繪面積，減少重繪次數(shù)。

函數(shù)組件

 function Welcome(props) {
            console.log(props)
            return <h1>hello world</h1>
        }
  const e = <Welcome name='jack'></Welcome>

輸出對象：

 function Welcome(props) {
            const {name} = props
            return <h1>hello {name}</h1>
        }
        const e = <Welcome name='jack'></Welcome>

輸出 hello jack

組件復(fù)用

當(dāng)函數(shù)組件被多次使用在不同場景時(shí)，中間的內(nèi)容會(huì)被react自動(dòng)賦予chilren屬性。如下：

 function Welcome(props) {
             const {chilren,name}=props
            return <h1>hello,{children},{name}</h1>
 }
 const e =
            <div>
                <Welcome />
                <Welcome>aa</Welcome>
                <Welcome name="jack">bb</Welcome>
            </div>

拿bb舉例子來說，props中children='bb',name="jack"

自動(dòng)執(zhí)行函數(shù)，同時(shí)props傳入函數(shù)，然后真實(shí)DOM渲染在容器中。

純函數(shù)

純函數(shù)：普通函數(shù)function fn(props){return value}，傳入相同的值，返回值不能改變。

 function sum(a, b) {
            return a + b
 }
 console.log(1,2)
 console.log(1,2)
 console.log(1,2)

不是純函數(shù)：傳入相同的值，返回值可能改變

 let p = 0;
 function sum(a, b) {
 a = p++;
 return a + b
}
 console.log(1,2)
 console.log(1,2)
 console.log(1,2)

組件組合--組件樹

業(yè)務(wù)模塊，學(xué)校-班級-教師-學(xué)生

依靠props傳遞數(shù)據(jù)，基于props引申出單向數(shù)據(jù)流的概念，從上到下數(shù)據(jù)流動(dòng)，即school-student

 let data = {
            school: {
                name: '一中',
                classes: [
                    {
                        name: 'YI班',
                        teacher: 'Mr.Wang',
                        students: [
                            {
                                name: '小紅1',
                                age: 18
                            },
                            {
                                name: '小紅2',
                                age: 18
                            },
                            {
                                name: '小紅3',
                                age: 18
                            },
                        ]
                    },
                    {
                        name: 'ER班',
                        teacher: 'Mr.Li',
                        students: [
                            {
                                name: '小紅4',
                                age: 18
                            },
                            {
                                name: '小紅5',
                                age: 18
                            },
                            {
                                name: '小紅6',
                                age: 18
                            },
                        ]
                    },
                    {
                        name: 'SAN班',
                        teacher: 'Mr.Zhang',
                        students: [
                            {
                                name: '小紅7',
                                age: 18
                            },
                            {
                                name: '小紅8',
                                age: 18
                            },
                            {
                                name: '小紅9',
                                age: 18
                            },
                        ]
                    },
                ]
            }
        }
        //--定義組件（組件及關(guān)系）
        //-定義幾個(gè)組件？
        function Student(props) {
            return <div>學(xué)員名</div>
        }
        function Teacher(props) {
            return <div>老師名</div>
        }
        function Class(props) {
            return <div>
                <h2>班級名</h2>
                <Teacher />
                <Student />
                <Student />
                <Student />
            </div>
        }
        function School(props) {
            return <div>
                <h2>學(xué)校名</h2>
                <Class />
                <Class />
                <Class />
            </div>
        }
        //-組件關(guān)系？
        //--根組件定義
        const e = <School data="data.school" />

顯示：

需求：將數(shù)據(jù)傳入根組件中，然后依次傳向子組件，形成數(shù)據(jù)流。

代碼實(shí)現(xiàn)：

  function Student(props) {
            const {StudentData} = props
            return <div>
                學(xué)員名:{StudentData[0].name},age:{StudentData[0].age};
                學(xué)員名:{StudentData[1].name},age:{StudentData[1].age};
                學(xué)員名:{StudentData[2].name},age:{StudentData[2].age}
                </div>
        }
        function Teacher(props) {
            const {TeacherName} = props
            return <div>{TeacherName}</div>
        }
        function Class(props) {
            const { classes } = props
            return <div>
                <h2>班級名{classes.name}</h2>
                <Teacher TeacherName={classes.teacher}/>
                <Student StudentData={classes.students}/>
                <Student StudentData={classes.students}/>
                <Student StudentData={classes.students}/> 
            </div>
        }
        function School(props) {
            // console.log(props)
            const { schoolData } = props
            return <div>
                <h2>學(xué)校名{schoolData.name}</h2>
                <Class classes={schoolData.classes[0]} />
                <Class classes={schoolData.classes[1]} />
                <Class classes={schoolData.classes[2]} />
            </div>
        }
        //--根組件定義
        const e = <School schoolData={data.school} />

界面顯示：

中秋節(jié)快樂，闔家團(tuán)圓，團(tuán)團(tuán)圓圓，捉住中秋的尾巴，23：55.晚安

更新

組件抽離

一個(gè)項(xiàng)目被接單后由項(xiàng)目組長進(jìn)行項(xiàng)目分析然后將任務(wù)分解給成員，通常react中有多個(gè)組件被分別書寫。這就涉及到了必不可少的項(xiàng)目拆分。

從后臺接口返回的json數(shù)據(jù)要渲染在前臺的頁面上，通常是利用到props進(jìn)行傳值。

例如

function Compo(){
}
var data = {
    user:{
        name:"小紅",
        age:"18"
    },
    hobby:"吃飯"
}
 ReactDOM.render(<Compo  />, document.getElementById("app"))

想要將data中的數(shù)據(jù)在函數(shù)組件中使用，于是在封裝組件處傳入

同時(shí)在function Compo(props)處書寫props來傳遞json數(shù)據(jù)。并利用解構(gòu)賦值來獲取data中的每一項(xiàng)數(shù)據(jù)key值

function Compo(props){
    const {user,hobby} = props.data
}
var data = {
    user:{
        name:"小紅",
        age:"18"
    },
    hobby:"吃飯"
}
 ReactDOM.render(<Compo data={data} />, document.getElementById("app"))

此時(shí)已經(jīng)獲取到了data中大致數(shù)據(jù)，進(jìn)一步想要將用戶名稱，年齡，愛好，封裝成三個(gè)不同的函數(shù)組件。于是書寫：

        function User(props) {
            return <div>用戶名</div>
        }
        function Content(props) {
            return <div>愛好</div>
        }

進(jìn)一步如何將根組件Compo中數(shù)據(jù)流向子組件User與Content中。

function User(props) {return <div>用戶名</div>}
function Content(props) {return <div>愛好</div>} 
function Compo(props){
    const {user,hobby} = props.data
    return <div><User></User><Content></Content></div>
}

通過同樣的方式在User組件與Content組件中通過props傳入數(shù)據(jù)。

function User(props) {
const {userData} = props.userData
return <div>{userData.name} {userData.age}</div> //即可獲得到name 與 age.
}
const {user,hobby} = props.data
return <div><User userData={user}></User></div>

以上就是react component function組件使用詳解的詳細(xì)內(nèi)容，更多關(guān)于react component function的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: