react.js 前端 javascript react全家桶实战（千峰教育）

说明：本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记，知识点不清或不全，可以到视频教程中学习

文章目录

一、安装create-react-app，新建react项目1、安装脚手架create-react-app2、新建项目后，官方建议把/src文件内容全部删除，然后自己重新写

二、react组件1、jsx = js + xml2、类组件/函数组件3、组件的样式-class和style绑定方式4、事件绑定5、ref6、diff算法,7、富文本内容展示8、请求数据axios和fetch9、平滑滚动插件better-scroll10、父子传值props、props-type11、子传父12、非父子通信13、受控组件/非受控组件14、插槽15、react生命周期16、PureComponent18、函数组件和hooks1）useEffect和useLayoutEffect区别？2）useEffect和useLayoutEffect3）useCalback4）useMemo（类似vue的computed）、useRef5）useContext6）useReducer7）自定义hooks

三、路由react-router-dom(v5)1、路由安装和简单使用（一级二级路由、重定向、404）2、嵌套路由3、编程式4、路由拦截/守卫5、路由模式6、withRouter

四、反向代理五、cssModule六、flux和redux （了解）3、安装redux4、使用5、createStore原理6、reducer扩展7、中间件redux-thunk和redux-promise8、Redux DevTool Extension 浏览器调试插件9、扩展小知识：纯函数

七、react-redux1、react-redux的安装和使用2、HOC和context在react-redux底层中的应用3、react-redux持久化

八、immutable1、浅拷贝和深拷贝2、immutable

九、redux-saga十、Ant Design组件库（pc端）十一、Ant Design mobile组件库（移动端）十二、Mobx（了解，后面有mobx-react）1、Mobx是什么？2、observable和autorun3、严格模式、action、runInAction

十三、Mobx-react十四、TS1、什么是typescript？2、typescript的基础：基本类型、数组、对象、类+接口3、创建typescript项目4、TS类组件4、TS函数组件5、TS路由6、redux

十五、tyled-components十六、DvaJS十七、umi1、umi是什么2、umi项目构建3、路由4、Mock和跨域5、dva集成（models）

十八、路由react-router-dom(v6)1、v6与v5的区别2、创建项目、安装路由3、定义路由方式一方式二：useRoutes定义路由表（推荐）

4、路由跳转和传参（函数组件）5、withRouter封装（类组件的路由跳转和获取路由传参）6、声明式导航和编程式导航7、路由拦截/路由守卫8、路由懒加载封装

十九、react冷门知识1、portal 传送门2、react懒加载（lazy和suspense）3、forwardRef4、memo

二十、项目实战

一、安装create-react-app，新建react项目

1、安装脚手架create-react-app

npm install -g create-react-app

或者不想全局安装create-react-app，可以直接使用如下命令，安装暂时的脚手架，则以后每次用的话就会使用最新版的create-react-app脚手架

npx create-react-app project-name

project-name为自定义项目名字，注意小写

扩展知识nrm管理镜像，在视频后半部分

2、新建项目后，官方建议把/src文件内容全部删除，然后自己重新写

新建index.js，这个整个项目的入口文件

二、react组件

1、jsx = js + xml

2、类组件/函数组件

函数组件没有状态，但是react 16.8加了hook，可以仿生命周期 jsx：内部js逻辑用一对花括号{}

类组件

import React from 'react';

class MyClass extends React.Component {

constructor(props) {

super(props)

this.state = {

name: 'myReact'

}

}

render() {

return (

// jsx内容

)

}

}

export default MyClass

函数组件

function MyClass () {

return (

// jsx内容

);

}

export default MyClass

3、组件的样式-class和style绑定方式

import styles from './style.css' // 导入css模块，webpack支持（脚手架已经帮配置好了）

// 1、jsx内容 style={{}}第一个花括号是用来转义，第二个花括号就是style样式对象

// 2、class选择器，要用className

4、事件绑定

import React from 'react';

class MyClass extends React.Component {

constructor(props) {

super(props)

this.state = {

}

}

name = 'qmz'

handleClik = () => {

console.log('hello', this.a)

}

render() {

return (

// 方式1 逻辑少的时候推荐

{console.log('hello')} }>click1

// 方式2 若handleClik为非箭头函数，则需要bind绑定this，否则this.a报错， 不推荐

// click2

// 方式3 推荐（前提是handleClik为箭头函数）

click2

// 方式4 比较推荐 this指向问题

this.handleClik() }>click2

)

}

}

export default MyClass

注意：react事件不会绑定在具体的某个标签中<>,而是采用事件代理模式

5、ref

绑定表单或者html标签元素，则拿到真实dom 绑定组件标签，则拿到组件对象

import React from 'react';

class MyClass extends React.Component {

handleClik = () => {

console.log('this.myRef:',this.myRef)

console.log('this.myRef.value:', this.myRef.value)

}

render() {

return (

// 使用ref={node => this.xxxRef=node}绑定

this.xxxRef=node} />

click2

)

}

}

export default MyClass

6、diff算法,

有状态更新，则新建虚拟dom，然后根据key来比较，标记差异的地方，再更新真实dom

面试：涉及新增和删除，为了列表的复用和重排，设置key唯一标识值（列表理想key应该为item.id），提高性能

7、富文本内容展示

8、请求数据axios和fetch

（1）安装axios

npm install axios

（2）请求接口

// axios请求电影院数据（已下请求cores后台允许跨域）

import axios from 'axios' // 引入axios

getCinemaList =() => {

const self = this

axios({

// url: "http://localhost:3000/data.json", // 这个路径则取的是public文件夹内的data.json

url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=a&k=7406159",

headers: {

'X-Client-Info': '{"a":"3000","cn":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',

'X-Host': "mall.film-ticket.cinema.list"

}

}).then(res => {

console.log('res:', res)

if(res.status == 200){

console.log("啦啦啦：", res.data.data)

}

}).catch(error => console.log('error:', error))

}

this.getCinemaList()

或者fetch（好像react自带）直接用

// axios请求电影院数据

getCinemaList =() => {

const self = this

fetch("https://m.maizuo.com/gateway?cityId=110100&ticketFlag=a&k=7406159", { // 默认get请求

headers: {

'X-Client-Info': '{"a":"3000","cn":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',

'X-Host': "mall.film-ticket.cinema.list"

}

}).then(res => { // 第一个then不是用户需要的数据,通过json()转换

console.log('res:', res)

return res.json();

}).then(res => {

console.log('res:', res)

if(res.status == 0){

console.log("啦啦啦：", res.data)

self.setState({

cinemaList: res.data?.cinemas,

showCinemaList: res.data?.cinemas,

})

}

}).catch(error => console.log('error:', error))

}

this.getCinemaList()

9、平滑滚动插件better-scroll

安装

npm install better-scroll

使用

import BetterScroll from ‘better-scroll’ // 引入better-scroll new new BetterScroll(“.classxxx”)

import React from 'react';

import BetterScroll from 'better-scroll' // 引入better-scroll

class Cinema extends React.Component {

constructor(props) {

super(props)

this.state = {

dataList: []

}

}

componentDidMount() {

this.setState({

dataList: [12,233,43434,213123,12312,12,3123,123132,213,123,23,4,23,23,12,12,423],

}, ()=> {

// 拿到数据，渲染了dom后才能获取要平滑滚动的容器.cinemaWrap

new BetterScroll(".cinemaWrap")

})

}

render() {

const { dataList } = this.state

return (

)

}

}

10、父子传值props、props-type

// 父组件

import React from 'react';

import Child from './Child.js';

export default class Father extends React.Component {

constructor(props) {

super(props)

this.state = {

flag: true,

age: 3,

name: 'qmz',

list:[1,2]

}

}

render() {

const { flag, age, name, list } = this.state

return (

)

}

}

子组件通过this.props接收父组件传值

// 子组件Child

import React from 'react';

import Types from 'prop-types ';

export default class Child extends React.Component {

constructor(props) {

super(props)

}

static propTypes = { // 定义props属性类型，校验传值类型

flag: Types.boolean,

age: Types.number,

name: Types.string,

list: Types.array

}

static defaultProps = { // 定义props默认值

flag: false,

age: 18,

name: 'zx',

list: []

}

render() {

const { flag, age, name } = this.props

return (

)

}

}

// 函数组件就只能这种写法了

/* Child.propTypes = { // 类属性,在类里面用，static定义

flag: Types.boolean,

age: Types.number,

name: Types.string,

list: Types.array

} */

扩展知识：类属性和对象属性

class Test = {

static a = 1 // 类属性

b = 100 // 对象属性

}

console.log(Test.a, Test.b) // 1 undefined

// 对象属性需要创建对象实例才能访问

const TestObj = new Test

console.log(Test.a, Test.b) // 1 100

11、子传父

// 父组件

import React from 'react';

import Child from './Child.js';

export default class Father extends React.Component {

constructor(props) {

super(props)

}

childClick = (value) => {

console.log("耶耶耶")

}

render() {

const { flag, age, name, list } = this.state

return (

)

}

}

子组件通过this.props接收父组件传值

// 子组件Child

import React from 'react';

import Types from 'prop-types ';

export default class Child extends React.Component {

constructor(props) {

super(props)

}

render() {

return (

)

}

}

// 函数组件就只能这种写法了

/* Child.propTypes = { // 类属性,在类里面用，static定义

flag: Types.boolean,

age: Types.number,

name: Types.string,

list: Types.array

} */

扩展知识：类属性和对象属性

class Test = {

static a = 1 // 类属性

b = 100 // 对象属性

}

console.log(Test.a, Test.b) // 1 undefined

// 对象属性需要创建对象实例才能访问

const TestObj = new Test

console.log(Test.a, Test.b) // 1 100

12、非父子通信

三种方式：状态提升、发布订阅模式/redux、context

1）状态提升 通过父组件作为中间人，适合同亲兄弟组件间通信

2）发布订阅模式 简单模拟发布订阅案例

定义桥梁bus

// bus.js

var bus = {

list: [],

// 订阅

subscribe(callback) {

this.list.push(callback)

},

// 发布

public(value) {

this.list.forEach(callback => {

callback && callback(value)

})

}

}

// bus.subscribe((value)=>{

// console.log('订阅1', value)

// })

// bus.subscribe(()=>{

// console.log('订阅2')

// })

// bus.public('Miss you')

export default bus

模拟订阅的组件

import React from 'react';

import Bus from '../components/bus.js'; // 引入 Bus

export default class ComOne extends React.Component {

constructor(props) {

super(props)

this.state = {

// valueFromComTwo: 'Master of none'

}

Bus.subscribe((value) => {

console.log(value) // 发布一个小可爱

// this.setState({valueFromComTwo: value})

})

}

render() {

return (

)

}

}

模拟发布的组件

import React from 'react';

import Bus from '../components/bus.js'; // 引入 Bus

export default class ComTWO extends React.Component {

render() {

return (

)

}

}

3）context方案（这种方式基本不用）

import React from 'react';

const GlobalContext = React.createContext() // 创建上下文

// 父组件(供应商)

export default class father extends React.Component {

constructor(props) {

super(props)

this.state = {

count: 0

}

}

// “消费者2”可以调用这个方法，count++，然后在“消费者1”中展示

testEvent = () => {

this.setState({count: this.state.count+1})

}

render() {

return (

// 供应商用包裹消费者，通过valu属性/方法传给消费者

count: this.state.count,

testEvent:() => this.testEvent()

}}>

)

}

}

// 消费者1

class ComOne extends React.Component {

constructor(props) {

super(props)

}

render() {

return (

{

value => (

)

}

)

}

}

// 消费者2

class ComTWO extends React.Component {

render() {

return (

{

value => (

)

}

)

}

}

13、受控组件/非受控组件

例如表单input的值，与状态没有绑定，取值的时候通过表单或者ref获取值，相反，表单元素与组件状态绑定，则为受控

受控组件最好用无状态组件（函数组件），通过函数传参来控制子组件 但是有表单域的组件，最好还是用非受控组件（类组件，然后父组件用ref操作子组件），不然很麻烦

14、插槽

在父组件中，在子组件的标签内放内容，则子组件里面的模板里面可以用this.props.children获取 插槽： 为了复用 一定程度减少父传子

import React from 'react';

export default class father extends React.Component {

clickxxx = () => {

// 可以减少父子组件通信

}

render() {

return (

this.clickxxx}>click

)

}

}

class Child extends React.Component {

render() {

return (

)

}

}

15、react生命周期

(1) 适合在componentDidMount中做的事情： 1）请求数据推荐写在 2）订阅函数调用 3）setInterval 4）基于创建完的dom进行初始化。例如betterScroll

(2) react16.2后componentWillMount就废弃了，fiber优化diff算法 (3) componentWillReceiveProps(nextProps)，最先获得父组件传来的值, (4) shouldComponentUpdate(nextProps, nextState), 主要性能优化，控制是否更新组件 (5) componentWillUnmount销毁前，可以做什么？比如要销毁组件用有设置window.resize监听事件，则组件销毁后window监听不会消失，所以要在销毁前手动取消监听(window.resize=null)

新生命周期

getDerivedStateFromProps(nextProps, nextState)

import React from 'react';

export default class father extends React.Component {

state = {

name: 'qmz'

}

// 初始化会执行 相当于componentWillMount

// 更新会执行 相当于componentWillUpdate

// 应用 props传值频繁更新，可以把props值转为state值（return）,避免重复触发渲染 多次异步

// 注意：不要在getDerivedStateFromProps里写异步

static getDerivedStateFromProps(nextProps, nextState) {

// console.log(this) // this为undefined，因为getDerivedStateFromProps是类属性（静态属性），不能读取this

return { // 规定要返回数据，和state进行合并更新

name: nextProps.name, // state中有同名的name，则覆盖

age: 18, // state中没有age属性，则新增到state中

type: nextState.type,

}

}

// 配合getDerivedStateFromProps使用（属性更新时，在return中返回），可以拿到更新后的最新状态属性

componentDidUpdate(preProps, preState) {

// 假设父组件传来type，type在getDerivedStateFromProps中转为state的属性，当type切换/变化时，请求对应数数据，否则返回，避免重复请求数据

console.log('preState:', preState)

if(preState.type === this.state.type) {

return

} else {

console.log('异步请求')

}

}

render() {

return this.setState({type: 2})}>切换Type

}

}

getSnapShotBeforeUpdate

在render和componentDidUpdate之间，案例看千峰视频

getSnapshotBeforeUpdate() {

const snapShot = 100 // 更新前的快照，可以在componentDidUpdate第三个参数拿到这个快照

return snapShot

}

componentDidUpdate(preProps, preState, snapShot) {

console.log('snapShot:', snapShot) // 100

}

16、PureComponent

react更新性能优化：自动（PureComponent）、手动（shouldComponentUpdate）PureComponent会自动对比状态属性（props或者state），没有变化则不更新，不用的话就要手动在shouldComponentUpdate中判断，如果状态属性频繁变化，则用PureComponent则效率不高

18、函数组件和hooks

函数组件没有自身状态，也没有this，需要使用hooks来实现保存state属性，或者模拟周期函数功能 常用hooks：useState、useEffect/useLayoutEffect、useCllback、useMemo、useRef、useReduce

1）useEffect和useLayoutEffect区别？

useLayoutEffect相当于类组件中的componentDidMount和componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染，而useEffect是在整个页面渲染完之后才会执行，则相当于组件函数继承pureComponent 官方建议优先使用useEffect，在实际使用时想要避免页面抖动（在useEffect中修改DOM有可能出现），可以把修改DOM的操作放到useLayoutEffect中，这些DOM的修改和react做出的更改会被一起一次性渲染到屏幕，只有一次回流，重绘的代价

2）useEffect和useLayoutEffect

import React, { useState, useEffect, useLayoutEffect } from 'react';

function Test(props) {

// const [xxx, setXxx] = useState('初始值') // xxx为属性名，setXxx为修改属性方法

const [flag, setFlag] = useState(false)

const [list, setList] = useState(['img1', 'img2', 'img3'])

const deleteItem = (index) => {

list.splice(index, 1)

setList([...list])

if(list.length === 0) {

setFlag(true)

}

}

// useEffect根据第二个传参决定执行时机

useEffect(() => {

console.log('1、不传参')

}) // 监听所以状态属性，只要有变化就执行

useEffect(() => {

console.log('2、传空数组')

return () => { // return函数相当于componentWillUnMount

console.log('组件销毁前')

// 应用案例: 组件销毁前取消页面window监听事件、或者清除计时器

// window.resize = null

// clearInterval(timer)

}

}, []) // 只执行一次，相当于类组件的componentDidMount， 但是如果return一个回调函数，则在组件销毁前执行return的回调函数

useEffect(() => {

console.log('3、传非空数组')

}, [props.xxx, list]) // 监听参数(props的或者state的)，有变化就执行

return (

)

}

export default Test

3）useCalback

4）useMemo（类似vue的computed）、useRef

import React, { useState, useMemo, useRef } from 'react';

export default function Test2(props) {

const [inputVal, setInputVal] = useState('')

const inputRef = useRef() // 1、ref可以绑定dom或者组件

const list = useRef(['手抓饭','汉堡','螺蛳粉','煲仔饭','披萨','曲奇','饼干','三明治','蛋糕','巧克力']) // 2、ref也可以用来缓存变量，使用xxxRef.current操作该变量

const memoList = useMemo(() => { // 如果搜索框值inputVal变化，则根据inputVal过滤list并返回结果

if(inputVal == '') {

return list.current

} else {

return list.current.filter(item => {

return item.includes(inputVal)

})

}

}, [inputVal]) // 相当于vuer的computed，返回一个计算值

return (

)

}

5）useContext

import React, { useState, useContext } from 'react';

const GlobalContext = React.createContext() // 创建上下文

// 选项子项

function FoodItem(props) {

const context = useContext(GlobalContext) // 引入上下文GlobalContext

return (

)

}

// 详情

function FoodDetail() {

const context = useContext(GlobalContext) // 引入上下文GlobalContext

return (

)

}

export default function Father() {

const [currentId, setCurrentId] = useState(5) // 选中的选项id

const [foodDetail, setFoodDetail] = useState('巧克力~~~') // 选中的选项详情

const list = [{

id: 1,

name: '手抓饭',

des: "牛肉粒、胡萝卜、油、盐、鸡蛋，多点油，胡萝卜素溶于油，胡萝卜黄色的油包裹粒粒分明的米饭，好吃！！！"

}, {

id: 2,

name: '螺蛳粉',

des: "螺蛳粉干泡20分钟，放入酱包大火煮六分钟，最后放入醋、酸笋和酸豆角、腐竹和花生、还有少量辣椒油，完成！！！"

}, {

id: 3,

name: '煲仔饭',

des: "炒菜，放多点水炒出酱汁，然后酱汁和菜放入泡了半个小时的米中，按煮饭键，半个小时后就变成了香喷喷的煲仔饭~~~"

}, {

id: 4,

name: '披萨',

des: "披萨~~~"

}, {

id: 5,

name: '巧克力',

des: "巧克力~~~"

}]

// 选中某个食物

const clickItem = (item) => {

setCurrentId(item.id)

setFoodDetail(item.des)

}

return (

value={{

currentId,

foodDetail,

click: (item) => clickItem(item)

}}>

)

}

6）useReducer

useReducer配置useContext，类似redux原理，这里纯当练手，实际开发使用redux

import React, { useContext, useReducer} from 'react';

const GlobalContext = React.createContext() // 创建上下文

var initState = {

a: 'A',

b: 'B',

}

const reducer = function(preState, action) {

const newState = {...preState}

switch(action.type){

case 'changeA': newState.a = action.value; break;

case 'changeB': newState.b = action.value; break;

default: break;

}

return newState

}

export default function Test4(props) {

const [state, dispatch] = useReducer(reducer, initState) // useReducer必须在函数（组件）里面使用

return (

value={{

state,

dispatch

}}>

)

}

function Child1() {

const { dispatch } = useContext(GlobalContext) // 获取上下文中的dispatch

return (

)

}

function Child2() {

const { state } = useContext(GlobalContext) // 获取上下文中的state

return (

)

}

function Child3() {

const { state } = useContext(GlobalContext) // 获取上下文中的state

return (

)

}

7）自定义hooks

案例

import React, { useState, useMemo, useRef } from 'react';

// 自定义定义hooks

// 当某个逻辑复用率很高，则可以抽出来封装成hooks

function useFilter(list, value) {

const showList = useMemo(() => {

if(value === '') {

return list

} else {

return list.filter(item => {

return item.includes(value)

})

}

}, [list, value])

console.log('showList:', showList)

return showList

}

function Test2(props) {

const [inputVal, setInputVal] = useState('')

const inputRef = useRef() // 1、ref可以绑定dom或者组件

const list = ['广州荔湾','广州天河','广州花都','佛山顺德','中山石歧','中山小榄','深圳龙岗','深圳福田']

const showList = useFilter(list, inputVal) // 使用自定义hook

return (

)

}

export default Test2

三、路由react-router-dom(v5)

v6版本

1、路由安装和简单使用（一级二级路由、重定向、404）

安装路由（这里使用5版本，也可以去React Router官网参考其他版本）

npm install react-router-dom@5

引入使用

// 引入HashRouter, Route, Switch, Redirect

import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';

import Films from './file/Films';

import Cinemas from './file/Cinemas';

import Center from './file/Center';

import NotFound from './NotFound.js'; // 404页面

export default function App() {

return (

);

}

2、嵌套路由

比如film1和film2嵌套在films内

3、编程式

千峰视频教程

原生

// 声明式

点击跳转index页面

// 编程式

location.href="#/films"

react路由、跳转方式、获取路由参数

声明式

电影

编程式

// 1、动态路由传参 当需要复制路由分享页面，则需要这种方式

props.history.push(`/films/filmDetail/${item.filmId}`) // 获取路由参数方式 props.match.params.filmId

// 2、query传参

props.history.push({

pathname: '/films/filmDetail',

query: {

filmId: item.filmId // 获取路由参数方式 props.location.query.filmId

}

})

// 3、state传参

props.history.push({

pathname: '/films/filmDetail',

state: {

filmId: item.filmId // 获取路由参数方式 props.location.state.filmId

}

})

4、路由拦截/守卫

// 相当于

}>

// 那么拦截逻辑可以放在回调函数里面

{是否已登录? : }}>

5、路由模式

两种路由模式：HashRouter 和 BrowserRouter，导入的时候可以重命名

// 导入时可以用as重命名为Router，这样的话，以后万一要改路由模式，直接在import的地方改就好

import { HashRouter as Router } from 'react-router-dom';

// 假如要改路由模式，直接把HashRouter改为BrowserRouter，重命名Router不变，省去麻烦

...

...

注意

\color{red}{注意}

注意：BrowserRouter没有#的路径，美观，但是会以这个路由向后端发起页面请求，后端没有对应路径，就会404，这样的话要和后台说清楚（教程说的我没明白，，，）。 HashRouter就不会，就会对应加载组件

6、withRouter

// 解析为

class Route extends React.component {

constructor(props) {

super(props)

}

render() {

var MyComponent = this.props.component

return

}

}

// 然而render方式，直接render，则在FilmDetail里面的props就为空对象

}>

// 所以需要传props

}>

假设组件没有用直接包裹,则props里面的路由信息为空，则可以用withRouter高阶函数

import { withRouter } from 'react-router-dom';

function FilmItem(props) {

const toDetail = () => {

props.history.push(`/films/filmDetail/${props.filmId}`) // 使用withRouter转换才可以拿到props.history.push方法

}

return (

)

}

export default withRouter(FilmItem)

四、反向代理

只有反向代理的跨域方式不需要后台配合

安装

npm install http-proxy-middleware

安装后新建文件setupProxy.js（注意修改后需要重启项目才会启动服务器）

// src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = function(app) {

app.use(

'/ajax',

createProxyMiddleware({

target: 'https://i.maoyan.com',

changeOrigin: true

})

)

app.use(

'/api',

createProxyMiddleware({

target: 'https://i.maoyan.com',

changeOrigin: true

})

)

}

import React, { useState, useEffect } from 'react';

import axios from 'axios'

export default function CommingSoon(props) {

const [list, setList] = useState([])

useEffect(() => {

// 如请求接口 https://i.maoyan.com/ajax/comingList?ci=20&limit=10&movieIds=&token=&optimus_uuid=4210D9B07AA011ED9D6E4B7AD83E9EA6C89D70A2672D4B1FA5CFA366FA0DE402&optimus_risk_level=71&optimus_code=10

axios({

url: "/ajax/comingList?ci=20&limit=10&movieIds=&token=&optimus_uuid=4210D9B07AA011ED9D6E4B7AD83E9EA6C89D70A2672D4B1FA5CFA366FA0DE402&optimus_risk_level=71&optimus_code=10",

})

.then(res => {

console.log('res:', res)

if(res.status == 200){

setList(res.data?.coming)

}

}).catch(error => console.log('error:', error))

}, [])

return (