从Vue2.0到React17——React开发入门

“这是我参与更文挑战的第1天，活动详情查看：更文挑战”

找工作时发现有一些公司是以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中是如何实现的。

1、脚手架

2、React中如何开发组件的UI

2.1 HTML部分

2.2 绑定 Class 和 Style

3、React中如何使用组件

4、React中如何定义组件数据

4.1 定义内部数据state

4.2 定义参数数据props

5、React中如何向组件传递数据

6、React中如何监听DOM事件

6.1 监听DOM元素的DOM事件

6.2 监听React组件的DOM事件

7、React中组件如何改变数据

7.1 改变内部数据state

7.2 改变参数数据props

8、React中父子组件如何通讯

9、React中如何监听组件数据的变化

10、React中父组件如何调用子组件的方法

11、React中组件插槽怎么实现

11.1 普通插槽

11.2 具名插槽

11.3 作用域插槽

Recommend

蜜雪冰城洗脑主题曲如何爆火？营销背后的传播规律

ExerSize Game - Improve your spatial intelligence through play | Product Hunt

6次分销活动，裂变了123万，我总结的8个关键点（坑）

搞不懂为什么还有人去拍牌？

全球第四家亚特兰蒂斯酒店水上乐园落子蓝鲸岛

7月开工！常州运河旁将再现古典园林群--萃园项目

孙杨重审案宣判禁赛期51个月 2024年夏天解禁

有翡 (豆瓣)

北门呼吁都上十大了，借势问下王克桢下小南门啥时开

Hire a hero for pretty much anything

About Joyk