網站首頁編程語言正文

react?component?function組件使用詳解_React

作者：霍格沃茨魔法師 ? 更新時間： 2022-12-04 編程語言

不可改變性

1.jsx-

2.component(function)-component(class)-components(函數組件組合)-component tree(redux)-app(項目開發)

在react中，創建了js對象（react元素）就是不可更改的（immutable）。就像是用相機拍照，相當于在此時間點已經定位了時間節點，只能拍下一張照片。

例如，使用底層react寫一個時鐘。

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

以上，無法實時更新最新的時間。

但是換種方法寫：

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

虛擬dom與真實dom

創建元素并打印

已知jsx語法創建的本質就是普通js對象，打印的結果為虛擬dom。

例如

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

但如果打印真實dom

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

獲得的結果為

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

函數組件

 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

組件復用

當函數組件被多次使用在不同場景時，中間的內容會被react自動賦予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"

自動執行函數，同時props傳入函數，然后真實DOM渲染在容器中。

純函數

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

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

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

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

組件組合--組件樹

業務模塊，學校-班級-教師-學生

依靠props傳遞數據，基于props引申出單向數據流的概念，從上到下數據流動，即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
                            },
                        ]
                    },
                ]
            }
        }
        //--定義組件（組件及關系）
        //-定義幾個組件？
        function Student(props) {
            return <div>學員名</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>學校名</h2>
                <Class />
                <Class />
                <Class />
            </div>
        }
        //-組件關系？
        //--根組件定義
        const e = <School data="data.school" />

顯示：

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

代碼實現：

  function Student(props) {
            const {StudentData} = props
            return <div>
                學員名:{StudentData[0].name},age:{StudentData[0].age};
                學員名:{StudentData[1].name},age:{StudentData[1].age};
                學員名:{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>學校名{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} />

界面顯示：

中秋節快樂，闔家團圓，團團圓圓，捉住中秋的尾巴，23：55.晚安

更新

組件抽離

一個項目被接單后由項目組長進行項目分析然后將任務分解給成員，通常react中有多個組件被分別書寫。這就涉及到了必不可少的項目拆分。

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

例如

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

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

同時在function Compo(props)處書寫props來傳遞json數據。并利用解構賦值來獲取data中的每一項數據key值

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

此時已經獲取到了data中大致數據，進一步想要將用戶名稱，年齡，愛好，封裝成三個不同的函數組件。于是書寫：

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

進一步如何將根組件Compo中數據流向子組件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傳入數據。

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>

原文鏈接：https://juejin.cn/post/7160547316154236964

上一篇：python中的list字符串元素排序_python
下一篇：pyecharts如何實現顯示數據為百分比的柱狀圖_pyth

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

react?component?function組件使用詳解_React

目錄

不可改變性

虛擬dom與真實dom

函數組件

組件復用

純函數

組件組合--組件樹

組件抽離

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

react?component?function組件使用詳解_React

目錄

不可改變性

虛擬dom與真實dom

函數組件

組件復用

純函數

組件組合--組件樹

組件抽離

相關推薦

網站首頁編程語言正文