網(wǎng)站首頁 編程語言 正文
從問題出發(fā)
我被問過這樣一個(gè)問題：
想要實(shí)現(xiàn)一個(gè) useTitle 方法，具體使用示例如下：
function Header() {
const [Title, changeTitle] = useTitle();
return (
<div onClick={() => changeTitle('new title')}>
<Title />
</div>
)
}
但在編寫 useTitle 代碼的時(shí)候卻出了問題：
function TitleComponent({title}) {
return <div>{title}</div>
}
function useTitle() {
const [title, changeTitle] = useState('default title');
useEffect(() => {
changeTitle(title)
}, [title])
const Element = React.createElement(TitleComponent, {title});
return [Element.type, changeTitle];
}
這段代碼直接報(bào)錯(cuò)，連渲染都渲染不出來，如果是你，該如何修改這段代碼呢？
元素與組件
其實(shí)這就是一個(gè)很典型的元素與組件如何區(qū)分和使用的問題。
元素
我們先看 React 官方文檔中對(duì) React 元素的介紹：
Babel 會(huì)把 JSX 轉(zhuǎn)譯成一個(gè)名為 React.createElement() 函數(shù)調(diào)用。以下兩種示例代碼完全等效：
const element = <h1 className="greeting">Hello, world!</h1>;
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 會(huì)預(yù)先執(zhí)行一些檢查，以幫助你編寫無錯(cuò)代碼，但實(shí)際上它創(chuàng)建了一個(gè)這樣的對(duì)象：
// 注意：這是簡(jiǎn)化過的結(jié)構(gòu)
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
這些對(duì)象被稱為 “React 元素”。它們描述了你希望在屏幕上看到的內(nèi)容。
你看，React 元素其實(shí)就是指我們?nèi)粘＞帉懙?JSX 代碼，它會(huì)被 Babel 轉(zhuǎn)義為一個(gè)函數(shù)調(diào)用，最終得到的結(jié)果是一個(gè)描述 DOM 結(jié)構(gòu)的對(duì)象，它的數(shù)據(jù)結(jié)構(gòu)本質(zhì)是一個(gè) JS 對(duì)象。
在 JSX 中，我們是可以嵌入表達(dá)式的，就比如：
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
所以如果我們要使用一個(gè) React 元素，那我們應(yīng)該使用嵌入表達(dá)式這種方式：
const name = <span>Josh Perez</span>;
const element = <h1>Hello, {name}</h1>;
組件
那組件呢？組件有兩種，函數(shù)組件和 class 組件：
// 函數(shù)組件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// class 組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
那如何使用組件呢？
const element = <Welcome name="Sara" />;
對(duì)于組件，我們要使用類似于 HTML 標(biāo)簽的方式進(jìn)行調(diào)用，Babel 會(huì)將其轉(zhuǎn)譯為一個(gè)函數(shù)調(diào)用
const element = React.createElement(Welcome, {
name: "Sara"
});
所以你看，組件的數(shù)據(jù)結(jié)構(gòu)本質(zhì)是一個(gè)函數(shù)或者類，當(dāng)你使用元素標(biāo)簽的方式進(jìn)行調(diào)用時(shí)，函數(shù)或者類會(huì)被執(zhí)行，最終返回一個(gè) React 元素。
問題如何解決
盡管這些內(nèi)容都來自于 React 官方文檔，但如果你能清晰的了解到 React 元素和組件的差別，你已經(jīng)可以解決開頭的問題了。至少有兩種方式可以解決，一種是返回 React 元素，一種是返回 React 組件
第一種我們返回 React 元素：
const root = ReactDOM.createRoot(document.getElementById('root'));
function Header() {
const [Title, changeTitle] = useTitle();
// 這里因?yàn)榉祷氐氖?React 元素，所以我們使用 {} 的方式嵌入表達(dá)式
return (
<div onClick={() => changeTitle('new title')}>
{Title}
</div>
)
}
function TitleComponent({title}) {
return <div>{title}</div>
}
function useTitle() {
const [title, changeTitle] = useState('default title');
useEffect(() => {
changeTitle(title)
}, [title])
// createElement 返回的是 React 元素
const Element = React.createElement(TitleComponent, {title});
return [Element, changeTitle];
}
root.render(<Header />);
第二種我們返回 React 組件：
const root = ReactDOM.createRoot(document.getElementById('root'));
function Header() {
const [Title, changeTitle] = useTitle();
// 因?yàn)榉祷氐氖?React 組件，所以我們使用元素標(biāo)簽的方式調(diào)用
return (
<div onClick={() => changeTitle('new title')}>
<Title />
</div>
)
}
function TitleComponent({title}) {
return <div>{title}</div>
}
function useTitle() {
const [title, changeTitle] = useState('default title');
useEffect(() => {
changeTitle(title)
}, [title])
// 這里我們構(gòu)建了一個(gè)函數(shù)組件
const returnComponent = () => {
return <TitleComponent title={title} />
}
// 這里我們直接將組件返回出去
return [returnComponent, changeTitle];
}
root.render(<Header />);
自定義內(nèi)容
有的時(shí)候我們需要給組件傳入一個(gè)自定義內(nèi)容。
舉個(gè)例子，我們實(shí)現(xiàn)了一個(gè) Modal 組件，有確定按鈕，有取消按鈕，但 Modal 展示的內(nèi)容為了更加靈活，我們提供了一個(gè) props 屬性，用戶可以自定義一個(gè)組件傳入其中，用戶提供什么，Modal 就展示什么，Modal 相當(dāng)于一個(gè)容器，那么，我們?cè)撛趺磳?shí)現(xiàn)這個(gè)功能呢？
第一種實(shí)現(xiàn)方式
以下是第一種實(shí)現(xiàn)方式：
function Modal({content}) {
return (
<div>
{content}
<button>確定</button>
<button>取消</button>
</div>
)
}
function CustomContent({text}) {
return <div>{text}</div>
}
<Modal content={<CustomContent text="content" />} />
根據(jù)前面的知識(shí)，我們可以知道，content 屬性這里傳入的其實(shí)是一個(gè) React 元素，所以 Modal 組件的內(nèi)部是用 {} 進(jìn)行渲染。
第二種實(shí)現(xiàn)方式
但第一種方式，并不總能解決需求。有的時(shí)候，我們可能會(huì)用到組件內(nèi)部的值。
就比如一個(gè)倒計(jì)時(shí)組件 Timer，依然提供了一個(gè)屬性 content，用于自定義時(shí)間的展示樣式，時(shí)間由 Timer 組件內(nèi)部處理，展示樣式則完全由用戶自定義，在這種時(shí)候，我們就可以選擇傳入一個(gè)組件：
function Timer({content: Content}) {
const [time, changeTime] = useState('0');
useEffect(() => {
setTimeout(() => {
changeTime((new Date).toLocaleTimeString())
}, 1000)
}, [time])
return (
<div>
<Content time={time} />
</div>
)
}
function CustomContent({time}) {
return <div style={{border: '1px solid #ccc'}}>{time}</div>
}
<Timer content={CustomContent} />
在這個(gè)示例中，我們可以看到 content 屬性傳入的是一個(gè) React 組件 CustomContent，而 CustomContent 組件會(huì)被傳入 time 屬性，我們正是基于這個(gè)約定進(jìn)行的 CustomContent 組件的開發(fā)。
而 Timer 組件內(nèi)部，因?yàn)閭魅氲氖墙M件，所以使用的是 <Content time={time}/>進(jìn)行的渲染。
第三種實(shí)現(xiàn)方式
在面對(duì)第二種實(shí)現(xiàn)方式的需求時(shí)，除了上面這種實(shí)現(xiàn)方式，還有一種稱為 render props 的技巧，比第二種方式更常見一些，我們依然以 Timer 組件為例：
function Timer({renderContent}) {
const [time, changeTime] = useState('0');
useEffect(() => {
setTimeout(() => {
changeTime((new Date).toLocaleTimeString())
}, 1000)
}, [time])
// 這里直接調(diào)用傳入的 renderContent 函數(shù)
return (
<div>
{renderContent(time)}
</div>
)
}
function CustomContent({time}) {
return <div style={{border: '1px solid #ccc'}}>{time}</div>
}
root.render(<Timer renderContent={(time) => {
return <CustomContent time={time} />
}} />);
鑒于我們傳入的是一個(gè)函數(shù)，我們把 content 屬性名改為了 renderContent，其實(shí)叫什么都可以。
renderContent 傳入了一個(gè)函數(shù)，該函數(shù)接收 time 作為參數(shù)，返回一個(gè) React 元素，而在 Timer 內(nèi)部，我們直接執(zhí)行了 renderContent 函數(shù)，并傳入內(nèi)部處理好的 time 參數(shù)，由此實(shí)現(xiàn)了用戶使用組件內(nèi)部值自定義渲染內(nèi)容。
多說一句，除了放到屬性里，我們也可以放到 children 里，是一樣的：
function Timer({children}) {
// ...
return (
<div>
{children(time)}
</div>
)
}
<Timer>
{(time) => {
return <CustomContent time={time} />
}}
</Timer>
我們可以視情況選擇合適的傳入方法。
React 系列
React 之 createElement 源碼解讀
原文鏈接：https://juejin.cn/post/7161320926728945701
相關(guān)推薦
- 2022-09-21 Flutter定義tabbar底部導(dǎo)航路由跳轉(zhuǎn)的方法_Android
- 2022-06-11 python?針對(duì)在子文件夾中的md文檔實(shí)現(xiàn)批量md轉(zhuǎn)word_python
- 2022-04-02 Pandas實(shí)現(xiàn)groupby分組統(tǒng)計(jì)的實(shí)踐_python
- 2022-05-11 解決 IntelliJ IDEA 中 .propertise 文件保存后中文亂碼
- 2023-07-13 react中的useRef的使用
- 2023-10-14 c/c++--編譯指令（預(yù)處理之后） #pragma
- 2022-06-15 GO語言中err接口及defer延遲異常處理分析_Golang
- 2022-08-23 C++詳解使用floor&ceil&round實(shí)現(xiàn)保留小數(shù)點(diǎn)后兩位_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速