前言
找工作時發現有一些公司是以React作為技術棧的，而且薪資待遇都不錯，為了增加生存的籌碼，所以還是得去學一下React，增加一項求生技能。因為我用Vue2.0開發項目已經四年了，故用Vue2.0開發項目的思路來學習React。
前端項目是由一個個頁面組成的，對于Vue來說，一個頁面是由多個組件構成的，頁面本身也是一個路由組件。對于React來說也是如此。Vue會提供一系列技術支持來完成一個組件的開發，可以從這一系列技術支持出發，去React中尋找對應的技術支持來入門React，比如React中如何開發組件的UI，React中如何使用組件，React中如何定義組件數據等等。
本專欄將按照這個思路帶領你從Vue2.0入門React17。
1、腳手架
首先得選擇一個腳手架搭建一個React工程，React有很多腳手架，為什么選擇UmiJS這個腳手架，不為什么，這個腳手架和Vue Cli比較類似，至少路由配置和Vue Router很類似。
在學習前，先用UmiJS搭建一個React工程，步驟很簡單：
- 先找個地方建個空目錄，打開命令行工具，執行命令
mkdir myapp && cd myapp； - 執行命令
npm create @umijs/umi-app創建一個React工程； - 執行命令
npm install安裝依賴； - 依賴安裝成功后，執行命令
npm run start啟動項目，在瀏覽器上打開 http://localhost:8000 訪問項目。
可以看見myapp這個React工程的目錄結構如下所示：
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── layouts/index.tsx
├── pages
├── index.less
└── index.tsx
└── app.ts
復制代碼
打開 .umirc.ts 文件，其內容如下所示
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {},
});
復制代碼
其路由是在routes選項中配置，配置和Vue Router非常相似，具體如何配置放在后面介紹路由跳轉和傳參中一并介紹。
接下來在src/pages/index.tsx文件中書寫demo來學習React。
2、React中如何開發組件的UI
Vue和React中所開發的都是組件，其頁面也是一個路由組件。在Vue中組件是定義在后綴為.vue的文件中，在React中組件是定義在后綴為.js的文件中，若使用TypeScript來開發React，則其組件是定義在后綴為.tsx的文件中。
那如何開發一個組件的UI部分，例如開發一個 HelloWorld 組件在瀏覽器頁面上展示hello world，一個組件的UI包括HTML部分和CSS部分。
2.1 HTML部分
組件的HTML部分，Vue推薦使用template模板，React推薦使用JSX語法。
在工程的src/pages文件夾中創建一個HelloWorld.js文件，在其中開發HelloWorld組件。
此外React組件有兩種定義方法，一種是函數形式，一種是ES6的class形式。
函數形式，稱為函數組件：
export default function HelloWorld() {
return (
<div>hello world</div>
);
}
復制代碼
ES6的class形式，稱為類組件：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>hello world</div>
);
}
}
復制代碼
這里要注意函數名的首字母要大寫。在函數中的return后面用JSX語法來開發組件的UI部分。
另外還要注意在return后面的內容最外面要用()括起來，否則在return同一行后面最少跟一個<才可以，如下所示：
export default function HelloWorld() {
return <
div>hello world</div>
}
復制代碼
這樣看起來是不是怪怪的，所以最好加個()。
2.2 綁定 Class 和 Style
關于組件的CSS部分，其最重要的是綁定 Class 和 Style，才能給組件的HTML添加樣式。
先來看一下 Class 與 Style 是固定不變，React 中是怎么綁定的。
export default function HelloWorld() {
return (
<div
className="title head"
style={{color:'red',fontSize:'16px'}}
>
hello world
</div>
);
}
復制代碼
React中是用className來綁定 Class，用style來綁定 Style。其中style接受的值是一個對象，且用{}中括號傳入，而且對象的屬性名只能用駝峰式 (camelCase) 來命名。
在來看一下 Class 與 Style 是變量，在React中是怎么綁定的。
- 類組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
}
render() {
return (
<div
className={`${this.state.className} ${this.state.isHead ? 'head' : ''}`}
style={this.state.styleData}
>
hello world
</div>
);
}
}
復制代碼
- 函數組件的寫法：
import { useState } from 'react';
export default function HelloWorld() {
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
<div
className={`${className} ${isHead ? 'head' : ''}`}
style={styleData}
>
hello world
</div>
);
}
復制代碼
在React中是使用{}給屬性賦值變量，且className只接受字符串，不接受數組或者對象，可以用ES6的模板字符串功能來拼接變量生成字符串。
在函數組件的寫法中用useState這個React Hook定義了一些變量，useState的作用放在后面介紹。
3、React中如何使用組件
HelloWorld 組件寫好了，要如何使用呢？先回顧一下在Vue中是如何使用組件的，在使用組件前要先注冊，可以注冊為全局組件或局部組件。
在React中是沒有注冊組件的概念，因為組件相當一個函數，只有引入組件的概念，也沒有全局組件的概念。使用組件前必須用import先把組件引入并命名。
import HelloWorld from './HelloWorld.js'
export default function Index(){
return (
<HelloWorld/>
)
}
復制代碼
在React中組件的命名必須以大寫字母開頭，因為 React 會將以小寫字母開頭的組件視為原生 DOM 標簽。
4、React中如何定義組件數據
從開發Vue組件的經驗來說，一個組件的數據，可以分為內部數據和參數數據兩種。對于React也是如此，在React中把內部數據稱為state，把參數數據稱為props。
4.1 定義內部數據state
在上面介紹React中如何綁定變量形式的 Class 和 Style 的過程已經定義了styleData、isHead、className這些內部數據。
- 在類組件中是在
this.state這個對象中定義數據：
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
復制代碼
- 在函數組件的寫法中使用
useState這個React Hook定義了數據：
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
復制代碼
個人推薦使用函數形式來開發React組件，可以使用React Hook，來避免去學習 ES6 中 的 class 語法，還有煩人的this指向問題，從而來降低入門難度。
關于的React Hook 可以看這里 。
4.2 定義參數數據props
props用來接收外部傳遞給組件的數據。例如在 HelloWorld 組件中定義title一個參數數據。
- 類組件的寫法：
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{this.props.title}</div>
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
復制代碼
在類組件中的構造函數constructor接受props作為傳入組件的參數數據集合，并調用super(props)把props傳給React.Component構造函數，這樣類組件才能接受參數數據集合props，再用this.props.title來讀取title參數數據的值，另外可以用defaultProps來定義title參數數據的默認值。
- 函數組件的寫法：
import { useState } from 'react';
export default function HelloWorld(props) {
const {title = 'hello world'} = props;
return (
<div>{title}</div>
);
}
復制代碼
函數組件接收一個props作為傳入組件參數數據的集合，利用 ES6 解構賦值的功能，來獲取組件的參數數據，并可以給參數數據設置默認值。
這里要注意了，在Vue的template模板中是用{{}}（雙大括號）來使用數據的，而在React中是統一用{}（單大括號）來使用數據的。
參數數據Props是用接收外部傳遞給組件的數據，那React中如何向組件傳遞數據呢？
5、React中如何向組件傳遞數據
在Vue中規定了動態數據和字符串、數字、布爾值、數組、對象類型的靜態數據如何傳遞給組件，我們一一對應去尋找React中如何傳遞。
- 傳遞動態數據
import { useState } from 'react';
import HelloWorld from './HelloWorld.js';
export default function Index(){
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
<HelloWorld
styleData={styleData}
isHead={isHead}
className={className}
/>
)
}
復制代碼
- 傳遞字符串類型的靜態數據
<HelloWorld title="hello vue"></HelloWorld>
復制代碼
- 傳遞數字類型的靜態數據
<HelloWorld num={1}></HelloWorld>
復制代碼
- 傳遞布爾值類型的靜態數據
<HelloWorld isHead={false}></HelloWorld>
復制代碼
- 傳遞數組類型的靜態數據
<HelloWorld className={['title','head']}></HelloWorld>
復制代碼
- 傳遞對象類型的靜態數據
<HelloWorld styleData={{color:'red','fontSize':"16px"}}></HelloWorld>
復制代碼
可見在React中，除了傳遞字符串類型的靜態數據，都要用{}包裹數據再賦值給組件標簽上的屬性來傳遞數據給組件。
6、React中如何監聽DOM事件
6.1 監聽DOM元素的DOM事件
- 類組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
// 為了在回調中使用 `this`，這個綁定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('點擊事件');
}
render() {
return (
<div onClick={this.handleClick}>hello world</div>
);
}
}
復制代碼
- 函數組件的寫法：
export default function HelloWorld() {
const handleClick = ()=>{
console.log('點擊事件');
}
return (
<div onClick={handleClick}>hello world</div>
);
}
復制代碼
React中用onClick來監聽點擊事件，用{}包裹點擊事件觸發時執行的函數，再賦值給onClick。
其中onClick是一個合成事件，在Vue中@后面跟著是DOM的原生事件，而React中on后面跟著并不是DOM的原生事件。例如Vue中監聽雙擊事件 @dblclick，而React中監聽雙擊事件 onDoubleClick。
React中的合成事件具體可以看這里。
6.2 監聽React組件的DOM事件
在Vue中用.native修飾符來監聽組件上的DOM事件，而在React中監聽組件上的DOM事件要這樣實現。
例如在組件上監聽click事件，先要把click事件觸發時要執行的函數當作Props給組件傳遞進去，在組件的根元素上監聽click事件，click事件觸發時執行該Props，這樣來間接監聽組件上的click事件。具體實現如下所示：
- 類組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props:any) {
super(props);
console.log(this.props)
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onClick();
}
render() {
return (
<div onClick={this.handleClick}>hello world</div>
);
}
}
復制代碼
import React from 'react';
import HelloWorld from './HelloWorld';
export default class Grandfather extends React.Component {
handleClick() {
console.log('點擊事件');
}
render() {
return (
<HelloWorld onClick={() => { this.handleClick() }}>
</HelloWorld>
)
}
}
復制代碼
- 函數組件的寫法：
export default function HelloWorld(props) {
const { onClick } = props
const handleClick = () => {
onClick();
}
return (
<div onClick={handleClick}>hello world</div>
);
}
復制代碼
import HelloWorld from './HelloWorld';
export default function Index(){
const handleClick = ()=>{
console.log('點擊事件');
}
return (
<HelloWorld onClick={() => { handleClick() }}>
</HelloWorld>
)
}
復制代碼
7、React中組件如何改變數據
上面介紹了，React組件的數據分為內部數據state和參數數據props，對應的改變方法也不一樣。
7.1 改變內部數據state
比如要改變組件中定義的內部數據title。
- 類組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'hello world',
className: 'title'
};
// 為了在回調中使用 `this`，這個綁定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
title: 'hello react',
className: 'title active'
}));
}
render() {
return (
<div
className={className}
onClick={this.handleClick}
>{title}</div>
);
}
}
復制代碼
在this.setState()中可以傳遞一個函數或一個對象，建議傳遞一個函數(state,props) =>{}，函數可以接受內部數據state和參數數據props作為參數，而且state和props只讀無法修改，每次調用this.setState時讀取到的state和Props都是最新，特別適用多次調用this.setState修改同一個state的場景。最后函數放回一個對象，對象的內容為要修改的state。
- 函數組件的寫法：
import { useState } from 'react';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world');
const [className,setClassName] = useState('title');
const handleClick = () =>{
setTitle('hello react');
setClassName('title active')
}
return (
<div
className={className}
onClick={handleClick}
>
{title}
</div>
);
}
復制代碼
在React中稱內部數據為state，使用useState(param)定義一個state時，可以通過參數param設置state的默認值，其返回一個數組，數組的第一個值是state，數組的第二個值是改變state的函數，可以調用該函數來改變state。
另外用useState定義的數據是響應式的，若頁面有使用該數據，該數據改變后頁面會重新渲染。
7.2 改變參數數據props
跟Vue一樣，在組件中是不能直接改變props，假如要改變props，只能通過在父組件中改變傳遞給子組件的數據來間接改變props，那在子組件中怎么讓父組件改變傳遞給子組件的數據呢，將在React中父子組件如何通訊介紹。
8、React中父子組件如何通訊
用一個例子來介紹，假如 HelloWorld 組件的 “hello world” 是用參數數據props中的title展示，點擊組件中的改變標題按鈕時變成 “hello React” 。
- 類組件的寫法：
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(){
this.props.changeTitle('hello React');
}
render() {
return (
<div>
{this.props.title}
<button
onClick={this.handleChangeTitle.bind(this)}>
改變標題
</button>
</div>
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
復制代碼
import HelloWorld from './HelloWorld.js'
import React from 'react'
class Index extends React.Component {
constructor(props) {
super(props);
this.state={
info:'hello world'
};
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(data){
this.setState(state =>{
return {
info:data
}
})
}
render() {
return (
<HelloWorld
title={this.state.info}
changeTitle={this.handleChangeTitle}>
</HelloWorld>
);
}
}
export default Index;
復制代碼
- 函數組件的寫法：
export default function HelloWorld(props: any) {
const { title = 'hello world', changeTitle } = props;
const handleChangeTitle = () => {
changeTitle('hello React')
}
return (
<div>
{title}
<button onClick={handleChangeTitle}>改變標題</button>
</div>
);
}
復制代碼
import { useState } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index(){
const [info,setInfo] = useState('hello world');
const handleChangeTitle = (data)=>{
setInfo(data);
}
return (
<HelloWorld title={info} changeTitle={handleChangeTitle}/>
)
}
復制代碼
在父組件中定義一個info數據傳遞給子組件的title參數數據，同時也定義了一個回調函數handleChangeTitle來改變info數據，并把回調函數也傳遞給子組件的changeTitle參數數據。
這樣子組件的changeTitle參數數據可以作為一個函數來調用，調用changeTitle時相當調用handleChangeTitle回調函數，可以把要改變的值通過data函數參數傳遞出來，再執行setInfo(data)改變info數據，再傳遞給子組件的title參數數據，間接改變了title參數數據，實現了React中組件如何改變參數數據。
在父組件中也可以調用setInfo改變傳遞給子組件的title參數數據的info數據，以上就是React中父子組件通訊的一個方法。
9、React中如何監聽組件數據的變化
在Vue中可以用簡單地用watch來監聽數據的變化，而在React中比較復雜，子組件的類型不同實現方法也不同。
- 類組件的寫法：
在類組件中用componentDidUpdate這個生命周期方法來實現，該方法首次渲染時componentDidUpdate不會執行，在后續props和state改變時會觸發componentDidUpdate，其接受的第一個參數prevProps代表改變前的props，第二參數prevState代表改變前的state。
componentDidUpdate(prevProps, prevState){
if(prevProps.title !== this.props.title){
console.log('props中的title數據改變了');
}
if(prevState.info !== this.state.info){
console.log('state中的info數據改變了');
}
}
復制代碼
- 函數組件的寫法
在函數組件中，可以useEffect這個React Hook監聽數據的變化，但是無法像Vue的watch能夠獲取改變前的舊數據。所以要自定義一個Hook來實現類似Vue的watch的功能。自定義Hook是一個函數，其名稱以 “use” 開頭，函數內部可以調用其他的 Hook。故把這個自定義Hook稱為useWatch。
如何獲取改變前的舊數據，可以在第一次數據改變時觸發useWatch時用一個容器把舊數據存儲起來，下次再觸發useWatch時通過讀取容器中的值就可以獲取改變前的舊數據。容器可以用useRef這個 Hook 來創建。
useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化為傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命周期內保持不變。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
useEffect(() =>{
callback(value,oldValue.current);
oldValue.current=value;
},[value])
}
復制代碼
但是useEffect會在組件初次渲染后就會調用一次，導致callback回調函數會被執行一次，另外在Vue的watch是用immediate配置來控制在組件初次渲染后馬上執行callback回調函數，且默認不會在組件初次渲染后執行callback回調函數，接著在hook.js中定義一個useWatch。
首先實現一下組件初次渲染不執行callback回調函數。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
復制代碼
再添加immediate配置來控制在組件初次渲染后是否馬上執行callback回調函數。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback,config={immediate: false}){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
if(config.immediate){
callback(value,oldValue.current);
}
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
復制代碼
另外Vue的watch還返回一個unwatch函數，調用unwatch函數可以停止監聽該數據。
import { useEffect, useRef } from 'react';
export function useWatch(value, callback, config = { immediate: false }) {
const oldValue = useRef();
const isInit = useRef(false);
const isWatch = useRef(true);
useEffect(() => {
if (isWatch.current) {
if (!isInit.current) {
isInit.current = true;
if (config.immediate) {
callback(value, oldValue.current);
}
} else {
callback(value, oldValue.current);
}
oldValue.current = value;
}
}, [value])
const unwatch = () => {
isWatch.current = false;
};
return unwatch;
}
復制代碼
useWatch 這個Hook 定義好后，這么使用。
export {useState} from 'react';
export {useWatch} from './hook.js';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world')
useWatch(title, (value, oldValue) => {
console.log(value);
console.log(oldValue)
})
const handleChangeTitle = () => {
setTitle('hello React')
}
return (
<div onClick={handleChangeTitle}>{title}</div>
);
}
復制代碼
10、React中父組件如何調用子組件的方法
在Vue中是使用ref給子組件賦予一個標識 ID ，再使用this.$refs[ID]訪問到這個子組件的實例對象，然后通過實例對象去調用子組件的方法。而在React中比較復雜，子組件的類型不同實現方法也不同。
- 類子組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title:'hello World'
};
}
handleChangeTitle(){
this.setState({
title:'hello React'
});
}
render() {
return (
<div>
{this.state.title}
</div>
);
}
}
復制代碼
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component {
constructor(props) {
super(props)
this.myCom = React.createRef();
this.changeTitle = this.changeTitle.bind(this);
}
changeTitle() {
this.myCom.current.handleChangeTitle();
}
render() {
return (
<div>
<HelloWorld ref={this.myCom} />
<button onClick={this.changeTitle}>改變標題</button>
</div>
)
}
}
export default Index;
復制代碼
- 函數組件的寫法：
useRef()無法使用在函數組件上使用，在函數組件中要先使用 useImperativeHandle 定義要暴露給父組件的實例值，另外要把函數組件傳入forwardRef處理后再導出。
import { useState, forwardRef, useImperativeHandle } from 'react';
const HelloWorld = (props, ref) => {
const [title, setTitle] = useState('hello World');
useImperativeHandle(ref, () => ({
handleChangeTitle: () => {
setTitle('hello React')
},
}));
return (
<div>{title}</div>
);
}
export default forwardRef(HelloWorld)
復制代碼
import { useRef } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index() {
const myCom = useRef();
const changeTitle = () => {
myCom.current.handleChangeTitle();
}
return (
<div>
<HelloWorld ref={myCom} />
<button onClick={changeTitle}>改變標題</button>
</div>
)
}
復制代碼
11、React中組件插槽怎么實現
11.1 普通插槽
其實React中是沒有插槽的概念，不過可以用props.children來實現插槽的功能。
每個組件都可以獲取到 props.children。它包含組件的開始標簽和結束標簽之間的內容。
例如開發一個 HelloWorld 組件用來展示 “ hello World ” ，也可以用插槽的形式來實現，通過props.children把 “ hello World ” 從父組件傳遞進去。
類組件的寫法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
復制代碼
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<HelloWorld>hello World</HelloWorld>
)
}
}
export default Index;
復制代碼
函數組件的寫法：
export default function HelloWorld(props){
const {children}=props;
return (
<div>
{children}
</div>
);
}
復制代碼
import HelloWorld from './HelloWorld.js';
export default function Index(){
return (
<HelloWorld>hello World</HelloWorld>
)
}
復制代碼
11.2 具名插槽
可以通過props給子組件傳遞一個函數，如果這個函數最后返回React元素，其React元素是用JSX語法編寫的，這樣就間接實現具名插槽的功能。
例如開發一個 HelloWorld 組件用來展示 “ hello World ” ，用具名插槽的形式來實現。
類組件的寫法：
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element();
}
}
render(){
return (
<div>
{this.elementSlot}
</div>
);
}
}
export default HelloWorld;
復制代碼
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(){
return(
<span>hello World</span>
)
}
render() {
return (
<HelloWorld element={this.info}></HelloWorld>
)
}
}
export default Index;
復制代碼
函數組件的寫法：
export default function HelloWorld(props) {
const { children, element } = props;
let elementSlot = "";
if (element) {
elementSlot = element();
}
return (
<div>
{elementSlot}
</div>
);
}
復制代碼
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = () =>{
return (
<span>hello World</span>
)
}
return (
<HelloWorld element={info}></HelloWorld>
)
}
復制代碼
11.3 作用域插槽
Vue的作用域插槽的作用是用子組件中的數據在父組件中寫插槽內容。
回顧上面具名插槽的實現過程，先在父組件中定義一個函數，該函數能返回一個React元素，再通過props把該函數傳遞給子組件，在子組件中執行該函數，把執行結果添加到子組件的React元素中。
如果在子組件中執行該函數時，把子組件的數據當作參數傳遞進去，那么在父組件中就可以用該函數接收子組件的數據來寫React元素（插槽的內容）。這樣就實現了作用域插槽。
例如開發一個 HelloWorld 組件用來展示 “ 用子組件的數據寫具名插槽 hello World ” ，用作用域插槽的形式來實現。
類組件的寫法：
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.state = {
info:'用子組件的數據寫具名插槽 hello World'
}
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element(this.state.info);
}
}
render(){
return (
<div>
{this.elementSlot}
</div>
);
}
}
export default HelloWorld;
復制代碼
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(data){
return(
<span>{data}</span>
)
}
render() {
return (
<HelloWorld element={this.info}>
</HelloWorld>
)
}
}
export default Index;
復制代碼
函數組件的寫法
import { useState } from "react";
export default function HelloWorld(props) {
const { children, element } = props;
const [info] = useState('用子組件的數據寫具名插槽 hello World')
let elementSlot = "";
if (element) {
elementSlot = element(info);
}
return (
<div>
{elementSlot}
{children}
</div>
);
}
復制代碼
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = (data) =>{
return (
<span>{data}</span>
)
}
return (
<HelloWorld element={info}></HelloWorld>
)
}
復制代碼
小結
以上從Vue開發一個組件會用到的技術，在React中尋找對應的實現方案的角度來入門React，讀完你應該會用React開發一些簡單的頁面，并能把頁面分割成一個個組件，并在組件之間進行數據交互。下一篇文章將介紹開發組件時在Vue中那些常用的指令在React中是如何實現的。
作者：紅塵煉心
鏈接：https://juejin.cn/post/6975864046058733576
