前言

到目前为止，笔者一直都是用Vue框架开发项目，由于最近参加了字节青训营嘛，课程中学习的框架是React,索性跟着老师来学习一下React,写了这样一篇笔记，如果有和我一样一直在用Vue而没有接触过React的同学欢迎来阅读哇~?

创建React项目

npx create-react-app my-app #创建项目
npm start #启动项目
复制代码

这样我们的React项目就创建好啦

JSX

JSX 是React引入的基于JS的扩展语法，用JSX语法描述UI的结构。

JSX中的标签有两种类型，一种是HTML标签，一种是React组件标签。

如何将React元素渲染到DOM中？

const element = <h1>hello,world</h1>;
ReactDOM.render(element,document.getElementById('root'))
复制代码

我们调用React里面的renderAPI就可以实现渲染~

组件

component = (props) => element
复制代码

React 组件必须像纯函数一样运行！

问！什么是纯函数呢？

纯函数：

1. 对于相同的入参，返回同样的结果
2. 无副作用（当调用函数时，除了返回函数值之外，还对主调用产生附加的影响）

React 组件又分为函数组件和类组件，它们两者有何区别呢，我们来看代码~

函数组件

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
复制代码

类组件

class Welcome extends React.Component {
    render() {
        return <h1>Hello,{this.props.name}</h1>;
    }
}
复制代码

组件的生命周期函数：

state

state的出现是为了在组件内部动态的渲染UI结构。state可以使React组件具有动态性。

state的更新必须使用setState这个API去做。

setState注意事项

1. 更改state要通过setState方法实现

// Wrong
this.state.comment = 'hello';
// Correct
this.setState({comment:'Hello'});
复制代码

2. 传入参数问题

// Wrong
this.state.setState({
    counter: this.state.counter + this.props.increment
});
// Correct
this.state.setState((state,props)=> ({
    counter: state.counter + props.increment
}));
复制代码

Psops: 父组件传递给子组件的属性，在子组件内部只读。
State: 组件内部自己维护的状态，可以被修改。

组件的组合用法

Hooks

React 16.8 以后，出现了新的组件开发方式

自定义hooks

以”use”作为函数名开头，封装通用逻辑的函数

import { useEffect } from 'react';

const useMounted = (fn:() => void) => {
    useEffect(() => {
        fn();
    },[])；
}；
复制代码

使用hooks要遵守的规则

只能在函数组件、自定义hook中调用hook。

只能在函数的最顶层控制流中调用hook

为什么要出现hooks?

使用hook可以让我们对组件的状态管理和逻辑做复用，hook是面向React未来的设计。

React Router 路由层

路由的分类

路由可以分为服务端路由和客户端路由。

服务端路由

请求发送到服务端，服务端决定返回对应的页面内容。

客户端路由

请求不发送到服务端，由客户端代码更新页面内容。

两种路由的应用场景，左边是多页面应用，右边是单页面应用。

现在在日常开发中，单页面应用是非常场景的应用组织方式。

BrowserRouter与HashRouter

• BrowserRouter：根据URL中的path做路由跳转
• HashRouter：根据URL中的hash部分做路由跳转

Route

当URL和Route中定义的path匹配时，渲染对应的组件，重要props: path、exact

路由跳转

• 声明式的组件方式：Link
• 命令式的API调用方式：history.push

useHistory：获取history对象
useParams：获取路由中的参数

最后

⚽到这我们初步认识了React和React Router，下一篇文章我将会带大家认识Redux~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！?
?GitHub 博客地址: github.com/Awu1227 。
?笔者还有其他专栏，欢迎阅读~
?玩转CSS之美
?Vue从放弃到入门
?深入浅出JavaScript