前言
到目前为止，笔者一直都是用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 组件必须像纯函数一样运行！
问！什么是纯函数呢？
纯函数：
- 对于相同的入参，返回同样的结果
- 无副作用（当调用函数时，除了返回函数值之外，还对主调用产生附加的影响）
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注意事项
- 更改state要通过setState方法实现
// Wrong this.state.comment = 'hello'; // Correct this.setState({comment:'Hello'}); 复制代码
- 传入参数问题
// 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~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
