手把手学习React本文已参与「新人创作礼」活动，一起开启掘金创作之路。前言来了新公司快一个月了，这里用的技术栈是 R

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

来了新公司快一个月了，这里用的技术栈是 React，所以要开始学习 React。相对而言 Vue 上手比较快，但是 React 16.8版本之后，学习成本就降低了很多，因为不用去考虑 类 和烦人的 this。还有就是 React 薪资会比 Vue 要高一些，动力不就来了吗？

学习方向

因为之前用的是 Vue2，所以学习也是按照这 Vue2 地思路去学习，学习方式的话是看官网和看技术社区大佬写的文章进行学习。本文章主要讲的是 函数式 组件。

1.脚手架

React 的脚手架很多，选择一个喜欢的脚手架，搭建一个 React 工程即可。
我使用的是 UmiJS 搭建，步骤如下：

首先执行 npm create @umijs/my-app 命令搭建工程
然后 npm install 安装依赖
最后执行 npm run start 启动项目

2.组件开发

2.1 创建组件

Vue 创建组件 index.vue
React 创建组件 index.jsx 或者 index.tsx，jsx 顾名思义是写 JS 的，tsx 肯定就是写 TS的哈
两者创建组件区别只是后缀名不一致

2.2 HTML

Vue 是用 <template> </template>
React 是用 return 后面的内容是用 () 包起来的，里面用的是 JSX 语法来开发组件的

注意点：函数名首字母是要大写的

    // 函数式组件
    export default function HelloWorld() {
        return (
            <div>HelloWorld</div>
        )
    }

2.3 Class

Vue 语法 class="类名"
React 语法 className="类名"

    export default function HelloWorld() {
        return (
            <div className="box">HelloWorld</div>
        )
    }

2.4 Style

Vue 语法 :style="{color: 'red'}"
React 语法 style={{ color: 'red' }}

注意点：其中style接受的值是一个对象，且用{}括号传入，而且对象的属性名只能用驼峰式来命名

    export default function HelloWorld() {
        return (
            <div style={{ color: 'red' }}>HelloWorld</div>
        )
    }

3. 组件的使用

Vue 使用组件先引入再注册最后使用组件
React 相当于函数，只有引入的概念，没有注册的概念，所以引入进来就可以使用

    import HelloWorld from './HelloWorld';
    // <> </> 相当于跟标签
    export default function Index() {
        return (
            <>
                <HelloWorld />
            </>
        )
    }

4. 声明变量

Vue 声明变量是在 data 里面定义的
React 使用 useState 返回的第一个值，进行声明变量的

注意点：Vue 使用数据是双大括号 {{ }},React 使用数据是单大括号 { }

    import React, { useState } from 'react';
    
    export default function HelloWorld() {
    const [title] = useState('豆豆'); // 括号里面是给初始值
    const [count] = useState(20);
        return (
            <>
                <div>{ title }</div>
                <div>{ count }</div>
            </>
        )
    }

5. 更新数据

Vue 更新数据是 this.xxx = xxx
React 更新数据是通过 useState 返回的第二个值，进行更新的

    import React, { useState } from 'react';
    
    export default function HelloWorld() {
    const [count, setCount] = useState(20);
        return (
            <>
                <div>{ count }</div>
                <div onClick{ () => { setCount(count + 1) } }>click me</div>
            </>
        )
    }

6. 绑定事件

Vue 绑定事件是 @click = "函数"
React 绑定事件 onClick = {函数}

注意点：Vue @后面是DOM原生事件，React on后面不是DOM原生事件哈
React 事件查看这里

    import React, { useState } from 'react';
    
    export default function HelloWorld() {
    const [count, setCount] = useState(20);
        return (
            <>
                <div>{ count }</div>
                <div onClick{ () => { setCount(count + 1) } }>click me</div>
            </>
        )
    }

7. 传参

Vue 传参是 :name="name"
React 传参是 name={name}

    import HolleWorld from './HelloWorld';
    
    export default function Index() {
    const [name, setName] = useState('豆豆');
    
        return (
            <>
                <HelloWorld 
                    name={name}
                />
            </>
        )
    }

8. 父子组件通讯

8.1 父传子

父传子就跟 Vue一样传递数据过去，然后用props接收数据父组件

    import HelloWorld from './HelloWorld';
    
    export default function Index() {
    const [name, setName] = useState('豆豆');
    const handleChangeName = () => {
        setName('一只豆豆')
    }
        return (
            <>
                <HelloWorld 
                    name={name}
                    handleChangeName={handleChangeName}
                />
            </>
        )
    }

子组件

    export default function HelloWorld(props) {
    // 利用对象解构赋值
    const { name, handleChangeName } = props
    
        return (
            <>
                <button onClick={handleChangeName}>click my</button>
            </>
        )
    }

8.2 子传父

子传父就是父组件传递一个方法给子组件，子组再件利用方法传参的方式传递数据给回父组件，最后父组件接收参数父组件

    import HelloWorld from './HelloWorld';
    
    export default function Index() {
    const [name, setName] = useState('豆豆');
    const handleNameChange = data => {
        setName(data)
    }
        return (
            <>
                <div>{name}</div>
                <HelloWorld 
                    name={name} 
                    changeName={handleChangeName} 
                 />
            </>
        )
    }

子组件

    export default function HelloWorld(props) {
      // 利用对象解构赋值
      const { name, changeName } = props;
      const handleClick = () => {
        changeName('一只豆豆');
      };
      return (
        <>
          <button onClick={handleClick}>click my</button>
        </>
      );
    }

9. 插槽

React 没有插槽，但是可以通过其他方式来实现插槽

9.1 普通插槽

通过props.children把 "hello React" 从父组件传递进去,自组件接收使用父组件

    import HelloWorld from './HelloWorld';
    
    export default function Index() {
        return (
            <>
                <HelloWorld>Hello React</HelloWorld>
            </>
        )
    }

子组件

    export default function HelloWorld(props) {
      const { children } = props;
      
      return (
        <>
          <div>{children}</div>
        </>
      );
    }

9.2 具名插槽

可以通过props给子组件传递一个函数，然后函数返回一个 JSX 语法的 React 元素，来间接实现具名插槽的功能。父组件

    import HelloWorld from './HelloWorld';
    
    export default function Index() {
        const element = () => {
            return (
                <div>Hello React</div>
            )
        }
        return (
            <>
                <HelloWorld 
                    element={element}
                />
            </>
        )
    }

子组件

    export default function HelloWorld(props) {
      const { element } = props;
      
      return (
        <>
          <div>
              {element}
          </div>
        </>
      );
    }

9.3 作用域插槽

没使用过就不介绍了

小结

以上介绍的也都是 Vue 开发使用的技术，都是一些很基础的，但是可以开发一些简单的组件了。