阅读 13988

从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 的过程已经定义了styleDataisHeadclassName这些内部数据。

  • 在类组件中是在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作为参数,而且stateprops只读无法修改,每次调用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中是如何实现的

文章分类
前端
文章标签