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

 前言

找工作时发现有一些公司是以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工程的目录结构如下所示：

 
 
 
      
  
  
  1. ├── package.json  
    2.   
  
  
  2. ├── .umirc.ts  
    3.   
  
  
  3. ├── .env  
    4.   
  
  
  4. ├── dist  
    5.   
  
  
  5. ├── mock  
    6.   
  
  
  6. ├── public 
    7.   
  
  
  7. └── src  
    8.   
  
  
  8.     ├── .umi  
    9.   
  
  
  9.     ├── layouts/index.tsx  
    10.   
  
  
  10.     ├── pages  
    11.   
  
  
  11.         ├── index.less  
    12.   
  
  
  12.         └── index.tsx  
    13.   
  
  
  13.     └── app.ts 
    14.

打开 .umirc.ts 文件，其内容如下所示

 
 
 
      
  
  
  1. import { defineConfig } from 'umi';  
    2.   
  
  
  2. export default defineConfig({  
    3.   
  
  
  3.   nodeModulesTransform: {  
    4.   
  
  
  4.     type: 'none',  
    5.   
  
  
  5.   },  
    6.   
  
  
  6.   routes: [  
    7.   
  
  
  7.     { path: '/', component: '@/pages/index' },  
    8.   
  
  
  8.   ],  
    9.   
  
  
  9.   fastRefresh: {},  
    10.   
  
  
  10. }); 
    11.

其路由是在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形式。

函数形式，称为函数组件：

 
 
 
      
  
  
  1. export default function HelloWorld() {  
    2.   
  
  
  2.   return (  
    3.   
  
  
  3.     
    hello world
      
    4.   
  
  
  4.   );  
    5.   
  
  
  5. } 
    6.

ES6的class形式，称为类组件：

 
 
 
      
  
  
  1. import React from 'react';  
    2.   
  
  
  2. export default class HelloWorld extends React.Component {  
    3.   
  
  
  3.   constructor(props) {  
    4.   
  
  
  4.     super(props);  
    5.   
  
  
  5.   }  
    6.   
  
  
  6.   render() {  
    7.   
  
  
  7.     return (  
    8.   
  
  
  8.       
    hello world
      
    9.   
  
  
  9.     );  
    10.   
  
  
  10.   }  
    11.   
  
  
  11. } 
    12.

这里要注意函数名的首字母要大写。在函数中的return后面用JSX语法来开发组件的UI部分。

另外还要注意在return后面的内容最外面要用()括起来，否则在return同一行后面最少跟一个<才可以，如下所示：

 
 
 
      
  
  
  1. export default function HelloWorld() {  
    2.   
  
  
  2.   return <  
    3.   
  
  
  3.     div>hello world
  
  • } 

    • 这样看起来是不是怪怪的，所以最好加个()。

    2.2 绑定 Class 和 Style

    关于组件的CSS部分，其最重要的是绑定 Class 和 Style，才能给组件的HTML添加样式。

    先来看一下 Class 与 Style 是固定不变，React 中是怎么绑定的。

     
 
 
        
  
  
    1. export default function HelloWorld() {  
      2.   
  
  
    2.   return (  
      3.   
  
  
    3.       
  
  
    4.       className="title head"  
      5.   
  
  
    5.       style={{color:'red',fontSize:'16px'}}  
      6.   
  
  
    6.     >  
      7.   
  
  
    7.       hello world  
      8.   
  
  
    8.     
      
  •   );  
  • } 

    • React中是用className来绑定 Class，用style来绑定 Style。其中style接受的值是一个对象，且用{}中括号传入，而且对象的属性名只能用驼峰式 (camelCase) 来命名。

    在来看一下 Class 与 Style 是变量，在React中是怎么绑定的。

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. export default class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     this.state = {  
      6.   
  
  
    6.       styleData: { color: 'red', 'fontSize': "16px" },  
      7.   
  
  
    7.       isHead: true,  
      8.   
  
  
    8.       className: 'title'  
      9.   
  
  
    9.     };  
      10.   
  
  
    10.   }  
      11.   
  
  
    11.   render() {  
      12.   
  
  
    12.     return (  
      13.   
  
  
    13.         
  
  
    14.         className={`${this.state.className} ${this.state.isHead ? 'head' : ''}`}  
      15.   
  
  
    15.         style={this.state.styleData}  
      16.   
  
  
    16.       >  
      17.   
  
  
    17.         hello world  
      18.   
  
  
    18.       
      
  •     );  
  •   }  
  • } 
    •  
 
 
        
  
  
    1. import { useState } from 'react';  
      2.   
  
  
    2. export default function HelloWorld() {  
      3.   
  
  
    3.   const [styleData] = useState({ color: 'red', 'fontSize': "16px" });  
      4.   
  
  
    4.   const [isHead] = useState(true);  
      5.   
  
  
    5.   const [className] = useState('title');  
      6.   
  
  
    6.   return (  
      7.   
  
  
    7.       
  
  
    8.       className={`${className} ${isHead ? 'head' : ''}`}  
      9.   
  
  
    9.       style={styleData}  
      10.   
  
  
    10.     >  
      11.   
  
  
    11.       hello world  
      12.   
  
  
    12.       
      13.   
  
  
    13.   );  
      14.   
  
  
    14. } 
      15.

    在React中是使用{}给属性赋值变量，且className只接受字符串，不接受数组或者对象，可以用ES6的模板字符串功能来拼接变量生成字符串。

    在函数组件的写法中用useState这个React Hook定义了一些变量，useState的作用放在后面介绍。

    3、React中如何使用组件

    HelloWorld 组件写好了，要如何使用呢？先回顾一下在Vue中是如何使用组件的，在使用组件前要先注册，可以注册为全局组件或局部组件。

    在React中是没有注册组件的概念，因为组件相当一个函数，只有引入组件的概念，也没有全局组件的概念。使用组件前必须用import先把组件引入并命名。

     
 
 
        
  
  
    1. import HelloWorld from './HelloWorld.js'  
      2.   
  
  
    2. export default function Index(){  
      3.   
  
  
    3.   return (  
      4.   
  
  
    4.       
      5.   
  
  
    5.   )  
      6.   
  
  
    6. } 
      7.

    在React中组件的命名必须以大写字母开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签。

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

    从开发Vue组件的经验来说，一个组件的数据，可以分为内部数据和参数数据两种。对于React也是如此，在React中把内部数据称为state，把参数数据称为props。

    4.1 定义内部数据state

    在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了styleData、isHead、className这些内部数据。

     
 
 
        
  
  
    1. this.state = {  
      2.   
  
  
    2.   styleData: { color: 'red', 'fontSize': "16px" },  
      3.   
  
  
    3.   isHead: true,  
      4.   
  
  
    4.   className: 'title'  
      5.   
  
  
    5. }; 
      6.  
 

     
 
 
        
  
  
    1. const [styleData] = useState({ color: 'red', 'fontSize': "16px" });  
      2.   
  
  
    2. const [isHead] = useState(true);  
      3.   
  
  
    3. const [className] = useState('title'); 
      4.

    个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的this指向问题，从而来降低入门难度。

    关于的React Hook 可以看https://zh-hans.reactjs.org/docs/hooks-intro.html" 。

    4.2 定义参数数据props

    props用来接收外部传递给组件的数据。例如在 HelloWorld 组件中定义title一个参数数据。

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.   }  
      6.   
  
  
    6.   render() {  
      7.   
  
  
    7.     return (  
      8.   
  
  
    8.       
      {this.props.title}
        
      9.   
  
  
    9.     );  
      10.   
  
  
    10.   }  
      11.   
  
  
    11. }  
      12.   
  
  
    12. HelloWorld.defaultProps = {  
      13.   
  
  
    13.   title: 'hello world'  
      14.   
  
  
    14. };  
      15.   
  
  
    15. export default HelloWorld; 
      16.

    在类组件中的构造函数constructor接受props作为传入组件的参数数据集合，并调用super(props)把props传给React.Component构造函数，这样类组件才能接受参数数据集合props，再用this.props.title来读取title参数数据的值，另外可以用defaultProps来定义title参数数据的默认值。

     
 
 
        
  
  
    1. import { useState } from 'react';  
      2.   
  
  
    2. export default function HelloWorld(props) {  
      3.   
  
  
    3.   const {title = 'hello world'} = props;  
      4.   
  
  
    4.   return (  
      5.   
  
  
    5.     
      {title}
        
      6.   
  
  
    6.   );  
      7.   
  
  
    7. } 
      8.

    函数组件接收一个props作为传入组件参数数据的集合，利用 ES6 解构赋值的功能，来获取组件的参数数据，并可以给参数数据设置默认值。

    这里要注意了，在Vue的template模板中是用{{}}（双大括号）来使用数据的，而在React中是统一用{}（单大括号）来使用数据的。

    参数数据Props是用接收外部传递给组件的数据，那React中如何向组件传递数据呢？

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

    在Vue中规定了动态数据和字符串、数字、布尔值、数组、对象类型的静态数据如何传递给组件，我们一一对应去寻找React中如何传递。

     
 
 
        
  
  
    1. import { useState } from 'react';  
      2.   
  
  
    2. import HelloWorld from './HelloWorld.js';  
      3.   
  
  
    3. export default function Index(){  
      4.   
  
  
    4.   const [styleData] = useState({ color: 'red', 'fontSize': "16px" });  
      5.   
  
  
    5.   const [isHead] = useState(true);  
      6.   
  
  
    6.   const [className] = useState('title');  
      7.   
  
  
    7.   return (  
      8.   
  
  
    8.       
  
  
    9.        styleData={styleData}   
      10.   
  
  
    10.        isHead={isHead}   
      11.   
  
  
    11.        className={className}  
      12.   
  
  
    12.     />  
      13.   
  
  
    13.   )  
      14.   
  
  
    14. } 
      15.  
 

     
 
 
        
  
  
    1.  
      2.  
 

     
 
 
        
  
  
    1.  
      2.  
 

     
 
 
        
  
  
    1.  
      2.  
 

     
 
 
        
  
  
    1.  
      2.  
 

     
 
 
        
  
  
    1.  
      2.

    可见在React中，除了传递字符串类型的静态数据，都要用{}包裹数据再赋值给组件标签上的属性来传递数据给组件。

    6、React中如何监听DOM事件

    6.1 监听DOM元素的DOM事件

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. export default class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     // 为了在回调中使用 `this`，这个绑定是必不可少的  
      6.   
  
  
    6.     thisthis.handleClick = this.handleClick.bind(this);  
      7.   
  
  
    7.   }  
      8.   
  
  
    8.   handleClick() {  
      9.   
  
  
    9.     console.log('点击事件');  
      10.   
  
  
    10.   }  
      11.   
  
  
    11.   render() {  
      12.   
  
  
    12.     return (  
      13.   
  
  
    13.       hello world  
      14.   
  
  
    14.     );  
      15.   
  
  
    15.   }  
      16.   
  
  
    16. } 
      17.  
 

     
 
 
        
  
  
    1. export default function HelloWorld() {  
      2.   
  
  
    2.   const handleClick = ()=>{  
      3.   
  
  
    3.      console.log('点击事件');  
      4.   
  
  
    4.   }  
      5.   
  
  
    5.   return (  
      6.   
  
  
    6.     hello world  
      7.   
  
  
    7.   );  
      8.   
  
  
    8. } 
      9.

    React中用onClick来监听点击事件，用{}包裹点击事件触发时执行的函数，再赋值给onClick。

    其中onClick是一个合成事件，在Vue中@后面跟着是DOM的原生事件，而React中on后面跟着并不是DOM的原生事件。例如Vue中监听双击事件 @dblclick，而React中监听双击事件 onDoubleClick。

    React中的合成事件具体可以看https://zh-hans.reactjs.org/docs/events.html#mouse-events。

    6.2 监听React组件的DOM事件

    在Vue中用.native修饰符来监听组件上的DOM事件，而在React中监听组件上的DOM事件要这样实现。

    例如在组件上监听click事件，先要把click事件触发时要执行的函数当作Props给组件传递进去，在组件的根元素上监听click事件，click事件触发时执行该Props，这样来间接监听组件上的click事件。具体实现如下所示：

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. export default class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props:any) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     console.log(this.props)  
      6.   
  
  
    6.     thisthis.handleClick = this.handleClick.bind(this);  
      7.   
  
  
    7.   }  
      8.   
  
  
    8.   handleClick() {  
      9.   
  
  
    9.     this.props.onClick();  
      10.   
  
  
    10.   }  
      11.   
  
  
    11.   render() {  
      12.   
  
  
    12.     return (  
      13.   
  
  
    13.       hello world  
      14.   
  
  
    14.     );  
      15.   
  
  
    15.   }  
      16.   
  
  
    16. }  
      17.  
 

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. import HelloWorld from './HelloWorld';  
      3.   
  
  
    3. export default class Grandfather extends React.Component {  
      4.   
  
  
    4.   handleClick() {  
      5.   
  
  
    5.     console.log('点击事件');  
      6.   
  
  
    6.   }  
      7.   
  
  
    7.   render() {  
      8.   
  
  
    8.     return (  
      9.   
  
  
    9.        { this.handleClick() }}>  
      10.   
  
  
    10.         
      11.   
  
  
    11.     )  
      12.   
  
  
    12.   }  
      13.   
  
  
    13. } 
      14.  
 

     
 
 
        
  
  
    1. export default function HelloWorld(props) {  
      2.   
  
  
    2.   const { onClick } = props  
      3.   
  
  
    3.   const handleClick = () => {  
      4.   
  
  
    4.     onClick();  
      5.   
  
  
    5.   }  
      6.   
  
  
    6.   return (  
      7.   
  
  
    7.     hello world  
      8.   
  
  
    8.   );  
      9.   
  
  
    9. }  
      10.  
 

     
 
 
        
  
  
    1. import HelloWorld from './HelloWorld';  
      2.   
  
  
    2. export default function Index(){  
      3.   
  
  
    3.   const handleClick = ()=>{  
      4.   
  
  
    4.     console.log('点击事件');  
      5.   
  
  
    5.   }  
      6.   
  
  
    6.   return (  
      7.   
  
  
    7.      { handleClick() }}>  
      8.   
  
  
    8.       
      9.   
  
  
    9.   )  
      10.   
  
  
    10. } 
      11.

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

    上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。

    7.1 改变内部数据state

    比如要改变组件中定义的内部数据title。

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. export default class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     this.state = {  
      6.   
  
  
    6.       title: 'hello world', 
      7.   
  
  
    7.       className: 'title'  
      8.   
  
  
    8.     };  
      9.   
  
  
    9.     // 为了在回调中使用 `this`，这个绑定是必不可少的  
      10.   
  
  
    10.     thisthis.handleClick = this.handleClick.bind(this);  
      11.   
  
  
    11.   } 
      12.   
  
  
    12.    handleClick() {  
      13.   
  
  
    13.     this.setState(state => ({  
      14.   
  
  
    14.       title: 'hello react',  
      15.   
  
  
    15.       className: 'title active'  
      16.   
  
  
    16.     }));  
      17.   
  
  
    17.   }   
      18.   
  
  
    18.   render() {  
      19.   
  
  
    19.     return (  
      20.   
  
  
    20.         
  
  
    21.         className={className}  
      22.   
  
  
    22.         onClick={this.handleClick}  
      23.   
  
  
    23.       >{title}  
      24.   
  
  
    24.     );  
      25.   
  
  
    25.   }  
      26.   
  
  
    26. } 
      27.

    在this.setState()中可以传递一个函数或一个对象，建议传递一个函数(state,props) =>{}，函数可以接受内部数据state和参数数据props作为参数，而且state和props只读无法修改，每次调用this.setState时读取到的state和Props都是最新，特别适用多次调用this.setState修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。

     
 
 
        
  
  
    1. import { useState } from 'react';  
      2.   
  
  
    2. export default function HelloWorld() {  
      3.   
  
  
    3.   const [title,setTitle] = useState('hello world');  
      4.   
  
  
    4.   const [className,setClassName] = useState('title');  
      5.   
  
  
    5.   const handleClick = () =>{  
      6.   
  
  
    6.     setTitle('hello react');  
      7.   
  
  
    7.     setClassName('title active')  
      8.   
  
  
    8.   }  
      9.   
  
  
    9.   return (  
      10.   
  
  
    10.       
  
  
    11.       className={className}   
      12.   
  
  
    12.       onClick={handleClick}  
      13.   
  
  
    13.     >  
      14.   
  
  
    14.       {title}  
      15.   
  
  
    15.       
      16.   
  
  
    16.   );  
      17.   
  
  
    17. } 
      18.

    在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” 。

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     thisthis.handleChangeTitle=this.handleChangeTitle.bind(this);  
      6.   
  
  
    6.   }  
      7.   
  
  
    7.   handleChangeTitle(){  
      8.   
  
  
    8.     this.props.changeTitle('hello React');  
      9.   
  
  
    9.   }  
      10.   
  
  
    10.   render() {  
      11.   
  
  
    11.     return (  
      12.   
  
  
    12.       
        
      13.   
  
  
    13.         {this.props.title}  
      14.   
  
  
    14.           
  
  
    15.           onClick={this.handleChangeTitle.bind(this)}>  
      16.   
  
  
    16.           改变标题  
      17.   
  
  
    17.           
      18.   
  
  
    18.         
      19.   
  
  
    19.     );  
      20.   
  
  
    20.   }  
      21.   
  
  
    21. }  
      22.   
  
  
    22. HelloWorld.defaultProps = {  
      23.   
  
  
    23.   title: 'hello world'  
      24.   
  
  
    24. };  
      25.   
  
  
    25. export default HelloWorld;  
      26.  
 

     
 
 
        
  
  
    1. import HelloWorld from './HelloWorld.js'  
      2.   
  
  
    2. import React from 'react'  
      3.   
  
  
    3. class Index extends React.Component {  
      4.   
  
  
    4.   constructor(props) {  
      5.   
  
  
    5.     super(props);  
      6.   
  
  
    6.     this.state={  
      7.   
  
  
    7.       info:'hello world'  
      8.   
  
  
    8.     };  
      9.   
  
  
    9.     thisthis.handleChangeTitle=this.handleChangeTitle.bind(this);  
      10.   
  
  
    10.   }  
      11.   
  
  
    11.   handleChangeTitle(data){  
      12.   
  
  
    12.     this.setState(state =>{  
      13.   
  
  
    13.       return {  
      14.   
  
  
    14.         info:data  
      15.   
  
  
    15.       }  
      16.   
  
  
    16.     })  
      17.   
  
  
    17.   }  
      18.   
  
  
    18.   render() {  
      19.   
  
  
    19.     return (  
      20.   
  
  
    20.         
  
  
    21.         title={this.state.info}   
      22.   
  
  
    22.         changeTitle={this.handleChangeTitle}>  
      23.   
  
  
    23.         
      24.   
  
  
    24.     );  
      25.   
  
  
    25.   }  
      26.   
  
  
    26. }  
      27.   
  
  
    27. export default Index; 
      28.  
 

     
 
 
        
  
  
    1. export default function HelloWorld(props: any) { 
      2.   
  
  
    2.   const { title = 'hello world', changeTitle } = props;  
      3.   
  
  
    3.   const handleChangeTitle = () => {  
      4.   
  
  
    4.     changeTitle('hello React')  
      5.   
  
  
    5.   }  
      6.   
  
  
    6.   return (  
      7.   
  
  
    7.     
        
      8.   
  
  
    8.       {title}  
      9.   
  
  
    9.       改变标题  
      10.   
  
  
    10.       
      11.   
  
  
    11.   );  
      12.   
  
  
    12. }  
      13.  
 

     
 
 
        
  
  
    1. import { useState } from 'react'  
      2.   
  
  
    2. import HelloWorld from './HelloWorld.js'  
      3.   
  
  
    3. export default function Index(){  
      4.   
  
  
    4.   const [info,setInfo] = useState('hello world');  
      5.   
  
  
    5.   const handleChangeTitle = (data)=>{  
      6.   
  
  
    6.     setInfo(data);  
      7.   
  
  
    7.   }  
      8.   
  
  
    8.   return (  
      9.   
  
  
    9.       
      10.   
  
  
    10.   )  
      11.   
  
  
    11. } 
      12.

    在父组件中定义一个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。

     
 
 
        
  
  
    1. componentDidUpdate(prevProps, prevState){  
      2.   
  
  
    2.   if(prevProps.title !== this.props.title){  
      3.   
  
  
    3.      console.log('props中的title数据改变了');  
      4.   
  
  
    4.   }  
      5.   
  
  
    5.   if(prevState.info !== this.state.info){  
      6.   
  
  
    6.      console.log('state中的info数据改变了');  
      7.   
  
  
    7.   }  
      8.   
  
  
    8. } 
      9.

    在函数组件中，可以useEffect这个React Hook监听数据的变化，但是无法像Vue的watch能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的watch的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为useWatch。

    如何获取改变前的旧数据，可以在第一次数据改变时触发useWatch时用一个容器把旧数据存储起来，下次再触发useWatch时通过读取容器中的值就可以获取改变前的旧数据。容器可以用useRef这个 Hook 来创建。

    useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

     
 
 
        
  
  
    1. import {useEffect,useRef} from 'react';  
      2.   
  
  
    2. export function useWatch(value,callback){  
      3.   
  
  
    3.   const oldValue = useRef();  
      4.   
  
  
    4.   useEffect(() =>{  
      5.   
  
  
    5.     callback(value,oldValue.current);  
      6.   
  
  
    6.     oldValue.current=value;  
      7.   
  
  
    7.   },[value])  
      8.   
  
  
    8. } 
      9.

    但是useEffect会在组件初次渲染后就会调用一次，导致callback回调函数会被执行一次，另外在Vue的watch是用immediate配置来控制在组件初次渲染后马上执行callback回调函数，且默认不会在组件初次渲染后执行callback回调函数，接着在_hook.js_中定义一个useWatch。

    首先实现一下组件初次渲染不执行callback回调函数。

     
 
 
        
  
  
    1. import {useEffect,useRef} from 'react';  
      2.   
  
  
    2. export function useWatch(value,callback){  
      3.   
  
  
    3.   const oldValue = useRef();  
      4.   
  
  
    4.   const isInit = useRef(false);  
      5.   
  
  
    5.   useEffect(() =>{  
      6.   
  
  
    6.     if(!isInit.current){  
      7.   
  
  
    7.       isInit.current = true;  
      8.   
  
  
    8.     }else{  
      9.   
  
  
    9.       callback(value,oldValue.current);  
      10.   
  
  
    10.     } 
      11.   
  
  
    11.     oldValue.current=value;  
      12.   
  
  
    12.   },[value])  
      13.   
  
  
    13. } 
      14.

    再添加immediate配置来控制在组件初次渲染后是否马上执行callback回调函数。

     
 
 
        
  
  
    1. import {useEffect,useRef} from 'react';  
      2.   
  
  
    2. export function useWatch(value,callback,config={immediate: false}){  
      3.   
  
  
    3.   const oldValue = useRef();  
      4.   
  
  
    4.   const isInit = useRef(false);  
      5.   
  
  
    5.   useEffect(() =>{  
      6.   
  
  
    6.     if(!isInit.current){  
      7.   
  
  
    7.       isInit.current = true;  
      8.   
  
  
    8.       if(config.immediate){  
      9.   
  
  
    9.         callback(value,oldValue.current);  
      10.   
  
  
    10.       }  
      11.   
  
  
    11.     }else{  
      12.   
  
  
    12.       callback(value,oldValue.current);  
      13.   
  
  
    13.     } 
      14.   
  
  
    14.     oldValue.current=value;  
      15.   
  
  
    15.   },[value])  
      16.   
  
  
    16. } 
      17.

    另外Vue的watch还返回一个unwatch函数，调用unwatch函数可以停止监听该数据。

     
 
 
        
  
  
    1. import { useEffect, useRef } from 'react';  
      2.   
  
  
    2. export function useWatch(value, callback, config = { immediate: false }) {  
      3.   
  
  
    3.   const oldValue = useRef();  
      4.   
  
  
    4.   const isInit = useRef(false);  
      5.   
  
  
    5.   const isWatch = useRef(true);  
      6.   
  
  
    6.   useEffect(() => {  
      7.   
  
  
    7.     if (isWatch.current) {  
      8.   
  
  
    8.       if (!isInit.current) {  
      9.   
  
  
    9.         isInit.current = true;  
      10.   
  
  
    10.         if (config.immediate) {  
      11.   
  
  
    11.           callback(value, oldValue.current);  
      12.   
  
  
    12.         }  
      13.   
  
  
    13.       } else {  
      14.   
  
  
    14.         callback(value, oldValue.current);  
      15.   
  
  
    15.       }  
      16.   
  
  
    16.       oldValue.current = value;  
      17.   
  
  
    17.     }  
      18.   
  
  
    18.   }, [value])  
      19.   
  
  
    19.   const unwatch =  () => {  
      20.   
  
  
    20.     isWatch.current = false;  
      21.   
  
  
    21.   };  
      22.   
  
  
    22.   return unwatch;  
      23.   
  
  
    23. }  
      24.  
 

     
 
 
        
  
  
    1. useWatch 这个Hook 定义好后，这么使用。  
      2.   
  
  
    2. export {useState} from 'react';  
      3.   
  
  
    3. export {useWatch} from './hook.js';  
      4.   
  
  
    4. export default function HelloWorld() {  
      5.   
  
  
    5.   const [title,setTitle] = useState('hello world')  
      6.   
  
  
    6.   useWatch(title, (value, oldValue) => {  
      7.   
  
  
    7.     console.log(value);  
      8.   
  
  
    8.     console.log(oldValue)  
      9.   
  
  
    9.   })  
      10.   
  
  
    10.   const handleChangeTitle = () => {  
      11.   
  
  
    11.     setTitle('hello React')  
      12.   
  
  
    12.   }  
      13.   
  
  
    13.   return (  
      14.   
  
  
    14.     {title}  
      15.   
  
  
    15.   );  
      16.   
  
  
    16. } 
      17.

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

    在Vue中是使用ref给子组件赋予一个标识 ID ，再使用this.$refs[ID]访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. export default class HelloWorld extends React.Component {  
      3.   
  
  
    3.   constructor(props) {  
      4.   
  
  
    4.     super(props);  
      5.   
  
  
    5.     this.state = {  
      6.   
  
  
    6.       title:'hello World'  
      7.   
  
  
    7.     };  
      8.   
  
  
    8.   }  
      9.   
  
  
    9.   handleChangeTitle(){ 
      10.   
  
  
    10.     this.setState({  
      11.   
  
  
    11.       title:'hello React'  
      12.   
  
  
    12.     });  
      13.   
  
  
    13.   }  
      14.   
  
  
    14.   render() {  
      15.   
  
  
    15.     return (  
      16.   
  
  
    16.       
        
      17.   
  
  
    17.         {this.state.title}  
      18.   
  
  
    18.         
      19.   
  
  
    19.     );  
      20.   
  
  
    20.   }  
      21.   
  
  
    21. }  
      22.  
 

     
 
 
        
  
  
    1. import React from 'react';  
      2.   
  
  
    2. import HelloWorld from './HelloWorld.js';  
      3.   
  
  
    3. class Index extends React.Component {  
      4.   
  
  
    4.   constructor(props) {  
      5.   
  
  
    5.     super(props)  
      6.   
  
  
    6.     this.myCom = React.createRef();  
      7.   
  
              
      
                新闻名称：从 Vue2.0 到 React17 —— React 开发入门
                
      
                路径分享：http://www.csdahua.cn/qtweb/news48/406798.html
            
      
            
      
                网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                快上网
            
      
        
        
      
            
      成都快上网为您推荐相关内容
      
            
        
      
    
    
      
        
      
            
      移动网站建设知识
      
            
        
      
        
      
            
      分类信息网站
      
            
        
      
    
      


      
    
      
        电信成都枢纽中心　　 　德阳定制网站建设　　 　成都光华机房服务器托管　　 　四川瑞杰　　 　成都花箱　　 　软文平台　　 　手机app　　 　成都网站建设　　 　网站建设公司　　 　成都发电机租赁　　 　成都网络营销　　 　重庆电商网站定制　　 　成都网站推广　　 　成都包装设计公司　　 　雪茄烟品牌　　 　蜜朵婚庆　　 　四川主机托管　　 　南充网站制作　　 　橡塑板　　 　手机网站版本