react?component?function組件使用詳解
不可改變性
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)目拆分。
從后臺(tái)接口返回的json數(shù)據(jù)要渲染在前臺(tái)的頁面上，通常是利用到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)文章！
相關(guān)文章
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React路由參數(shù)傳遞與嵌套路由的實(shí)現(xiàn)詳細(xì)講解
這篇文章主要介紹了React路由參數(shù)傳遞與嵌套路由的實(shí)現(xiàn)，嵌套路由原則是可以無限嵌套，但是必須要讓使用二級路由的一級路由匹配到，否則不顯示，需要的朋友可以參考一下2022-09-09
從零搭建Webpack5-react腳手架的實(shí)現(xiàn)步驟(附源碼)
本文主要介紹了從零搭建Webpack5-react腳手架的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了react?redux的原理以及基礎(chǔ)使用講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React?Flux與Redux設(shè)計(jì)及使用原理
這篇文章主要介紹了React?Flux與Redux設(shè)計(jì)及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個(gè)單獨(dú)的常量狀態(tài)樹（state對象）保存這一整個(gè)應(yīng)用的狀態(tài)，這個(gè)對象不能直接被改變2023-03-03
本篇文章主要介紹了React中上傳圖片到七牛的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
react+antd.3x實(shí)現(xiàn)ip輸入框
這篇文章主要為大家詳細(xì)介紹了react+antd.3x實(shí)現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了在react中使用windicss的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
react性能優(yōu)化useMemo與useCallback使用對比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04