深入 JSX

在運(yùn)行時(shí)選擇類型

錯(cuò)誤

import React from 'react'; import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory };function Story(props) {// 錯(cuò)誤！JSX 標(biāo)簽名不能為一個(gè)表達(dá)式。return <components[props.storyType] story={props.story} />; } 復(fù)制代碼

正確：如果你的確想通過(guò)表達(dá)式來(lái)確定 React 元素的類型，請(qǐng)先將其賦值給大寫開頭的變量，不能是小寫的！

import React from 'react'; import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory };function Story(props) {// 正確！JSX 標(biāo)簽名可以為大寫開頭的變量。const SpecificStory = components[props.storyType];return <SpecificStory story={props.story} />; } 復(fù)制代碼

擴(kuò)展屬性

function App1() {return <Greeting firstName="Ben" lastName="Hector" />; }function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};return <Greeting {...props} />; } 復(fù)制代碼

當(dāng)你構(gòu)建通用容器時(shí)，擴(kuò)展屬性會(huì)非常有用。然而，這樣做也可能讓很多不相關(guān)的屬性，傳遞到不需要它們的組件中使代碼變得混亂。我們建議你謹(jǐn)慎使用此語(yǔ)法。

Context

Context 設(shè)計(jì)目的是為共享那些被認(rèn)為對(duì)于一個(gè)組件樹而言是“全局”的數(shù)據(jù)，例如當(dāng)前認(rèn)證的用戶、主題或首選語(yǔ)言。

Fragments

React 中一個(gè)常見模式是為一個(gè)組件返回多個(gè)元素。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)。

class Columns extends React.Component {render() {return (<><td>Hello</td><td>World</td></>);} }<table><tr><td>Hello</td><td>World</td></tr> </table> 復(fù)制代碼

Portals

高階組件

具體而言，高階組件就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的React官方文档学习笔记（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。