react 咻咻咻

骑猪看日落 2022-10-08 12:24 73阅读 0赞

# react 必知必会
    
    1. 函数式组件(简单无状态场景) / class类式组件 (复杂有状态场景)
    2. react思想：状态驱动UI
    3. 组件实例三大核心：refs/props/state
    4. class = function + hooks
    5. this.state = {isHot:true}
       const isHot = this.state

# 1. hello world
    
    <div id="example"></div>
    <script type="text/babel">
      const vdom= <h1>Hello, world!</h1>;
      ReactDOM.render(vdom,document.getElementById('example'));
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70][]

# 2. 函数式组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 1][]

# 3. 类组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 2][]

# 4. 函数和class组合场景

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 4][]

#  5. state 和 props
    (我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上)
    (https://www.runoob.com/react/react-props.html)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 5][]

# 6. 切换按钮点击事件
    (https://www.runoob.com/react/react-event-handle.html)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 6][]

# 7. 事件传参
    (https://www.runoob.com/react/react-event-handle.html)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 7][]

# 8. 案例演示1
    (事件是通过改变status状态来实现的，等同于通过变量param控制UI)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 8][]

# 9. 表达式和html在{ }中混编
    (true && expression 总是返回 expression，而 false && expression 总是返回 false)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 9][]

# 10. 条件判断：三目运算

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 10][]

# 11. 阻止组件渲染

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 11][]

# 12. 列表渲染

![20210624134620585.png][]

# 13. key值传递
    (如果要传递key值，需要借助id)
    const content = posts.map((post) =>
      <Post
        key={post.id}
        id={post.id}
        title={post.title} />
    );

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 12][]

# 14. 生命周期
    (结果：
        Component WILL MOUNT!
        Component DID MOUNT!
        Component WILL RECEIVE PROPS!
        Component WILL UPDATE!
        Component DID UPDATE!
    )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 13][]

# 15. react请求数据更新status状态

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 14][]

# 16. form表单输入框变更监听

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 16][]

# 17. 下拉菜单提交

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 17][]

# 18. 输入框和单选

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 18][]

==============================华丽分割线==================================

# 1. 简洁版写法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 19][]

# 2. props传递对象写法
    
    # 其他 (复制person对象，并修改/添加name属性，之后合并内容)
    let person2 = {...person,name:'cc'}

![20210627154133676.png][]

# 3. class类中限制props属性数据类型
    
    # 注意
    props是只读的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 20][]

# 4. 字符串类型ref

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 21][]

# 5. 回调形式的ref (内联方式)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 22][]

# 6. createRef (最新写法)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 23][]

# 7. 表单提交 （非受控组件）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 24][]

# 8. 表单提交 (受控组件：用到state状态)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 25][]

# 10. 高阶函数/函数柯里化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 26][]

# 11. 组件生命周期 (挂载阶段)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 27][]

# 12. 生命周期
    
    # 12.1. 旧版本 (16.8)
    
    1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
        1.constructor()
        2.componentWillMount()
        3.render()
        4.componentDidMount()
    2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
        1.shouldComponentUpdate()
        2.componentWillUpdate()
        3.render()
        4.componentDidUpdate()
    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        1.componentWillUnmount()
    
    # 12.2. 新版本 (17.2)
    
    1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
        1.constructor()
        2.getDerivedStateFromProps 
        3.render()
        4.componentDidMount()
    2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
        1.getDerivedStateFromProps
        2.shouldComponentUpdate()
        3.render()
        4.getSnapshotBeforeUpdate
        5.componentDidUpdate()
    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        1.componentWillUnmount()
    
    # 小结
    新版本去掉三个生命周期：componentWillMount、componentWillReceiveProps、componentWillUpdate
    增加了三个生命周期：getDerivedStateFromProps、getDerivedStateFromProps、getSnapshotBeforeUpdate

# 13. 插件
    
    # 13.1. 前端跨域代理 (正向代理)
    
    # 13.2. 兄弟组件之前传值 (消息订阅与发布机制)
    
    # 13.3. fetch/axios 数据请求 (fetch：关注分离原则)
    
    # 13.4. SPA 单页面，多组件，局部刷新

# 14. react-router
    
    # 概念
    
    # 14.1. 什么是路由
    1.	一个路由就是一个映射关系(key:value)
    2.	key为路径, value可能是function或component
    3. function为后端路由，component为前端路由
    
    # 14.2. 路由分类
    1.	后端路由：
    1)	理解： value是function, 用来处理客户端提交的请求。
    2)	注册路由： router.get(path, function(req, res))
    3)	工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
    2.	前端路由：
    1)	浏览器端路由，value是component，用于展示页面内容。
    2)	注册路由: <Route path="/test" component={Test}>
    3)	工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
    
    # 14.3. 前端路由原理
    前端路由依靠浏览器的历史记录history实现
    
    # 14.4. react-router分类
    1. web端使用 (react-router-dom)
    2. native端使用
    3. any任何都可以使用
    
    # 14.5. 路由基本使用
    1. 场景：点击左侧导航区，展示区内容切换
    2. 导航区：<Link to="/xx">Demo</Link>
    3. 展示区：<Route path="/xx" component={Demo} />
    4. 主程序入口：<APP>最外层包裹一个<BrowserRouter>或<HashRouter>

15. 路由组件与一般组件的区别

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 28][]

# 16. NavLink使用
    
    注意：<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数
    
    小结：Navlink为link增加了几个渲染属性 (选中样式)

![20210816164204568.png][]

# 17. 包装自定义组件 (MyNavLink组件)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 29][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 30][]

# 18. switch标签 (当查找到目标路由后立即结束匹配)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 31][]

# 19. 初始化默认路由选项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 32][]

# 20. react-route嵌套路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 33][]

# 21. 向路由组件传递参数的三种方式
    
    1. params参数
    携带参数：<Link to='/demo/test/tom/18'>详情</Link>
    声明接收：<Route path='/demo/test/:name/:age' component={Test}/>
    接收参数：const {name,age} = this.props.match.params
    
    2. search参数
    携带参数：<Link to='/demo/test?name=tom&age=18'>详情</Link>
    注册路由(无需声明，正常注册即可)：<Route path='/demo/test' component={Test}/>
    接受参数：const {search} = this.props.location.search
    注意：search是unicode编码，需要借助querystring第三方工具包来解析
    
    3. state参数
    携带参数：<Link to={
       {path='/demo/test',state:{name:'tom',age:18}}}>详情</Link>
    注册路由(无需声明，正常注册即可)：<Route path='/demo/test' component={Test}/>
    接受参数：const {search} = this.props.location.state

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 34][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70]: /images/20221005/2917c6d113484acd879cdfc6842d9722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 1]: /images/20221005/7d19c1621a0544f38daecf005943b1c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 2]: /images/20221005/bd228c5a207544b2b3bbaf990674351d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 3]: /images/20221005/59ac626594b24527836364539712b1c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 4]: /images/20221005/42ccc4e514854f8399bb3e4c39a024f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 5]: /images/20221005/5b793fc3c7a44bcaa9fb8dd79754293a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 6]: /images/20221005/3a12ea264aa74c258db1179d252eb2b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 7]: /images/20221005/748297d207cc4ea196a6e56d0adf2ac4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 8]: /images/20221005/76fd780df5054f9eaaa21a5bf1ce516a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 9]: /images/20221005/fec0bcb3b0214567817ad33f98db6eb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 10]: /images/20221005/86ce803b5d8248828634302c88c3f43d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 11]: /images/20221005/76f0448c777a4b1f82460cc5a26cd8b3.png
[20210624134620585.png]: /images/20221005/3d710343b31e4173957f7febd402c242.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 12]: /images/20221005/7f259b4ae6c94c1186b51f4e97ab77c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 13]: /images/20221005/ec62d4c4194e47bf982a3edce719175d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 14]: /images/20221005/964172918bca49cda8a13cee45f82950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 15]: /images/20221005/72dde76cb4294c96b3faddb0aa4999f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 16]: /images/20221005/37815207cae6456db3ef73d87d45223d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 17]: /images/20221005/0e519fa9822c427ba6b2163438f308b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 18]: /images/20221005/fda2db58339544e6bf5ceb1c5d05e56c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 19]: /images/20221005/ac6763891bef455c9de93739663d7a83.png
[20210627154133676.png]: /images/20221005/adbd183e2fd04c22afae3402027f7a23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 20]: /images/20221005/5ad34584714a45a2b864a2a6f13f30cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 21]: /images/20221005/757e8df1ebbd407fa2a7d4ac7e2b158b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 22]: /images/20221005/e6c473f186954d21b4cbda812111bd71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 23]: /images/20221005/4d2586c89d1542a68e5336fbd4e6062d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 24]: /images/20221005/34970c610a9a4685a530e25a1a9da39f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 25]: /images/20221005/3a647cc5e1e1499daaa88dfc8ea49b8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 26]: /images/20221005/e93d331dba074b69957bcec666b100e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 27]: /images/20221005/8f3a9dc1260f41bf83ff824862d23b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 28]: /images/20221005/d7dac77f4ec34184a4e6f9b392655357.png
[20210816164204568.png]: /images/20221005/f0a31df8337d43f5a847f5c540ac5056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 29]: /images/20221005/dbe24ec0dc0f4d89b7ea33a244131a38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 30]: /images/20221005/3c5c4e2af0184baa9639bf0d42566a89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 31]: /images/20221005/6c5eb7f02ad94b03bce5bb2f2b22596d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 32]: /images/20221005/27f3f3a347e743e0a349f14c870890d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 33]: /images/20221005/f4d2268d5f784faa9ec8e24bcd8683ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpblVzZXI_size_16_color_FFFFFF_t_70 34]: /images/20221005/5bf679de69664a5fb241d2b20e9d5b6c.png