• react API


    1. React.createElement() useMemo

    useMemo是针对变量添加的辅助函数,在组件中如果异步的回调使用useState,会导致这个异步死循环,原因在异步会有capture Value, 刷新页面,解决这个问题就用useMem调用一次储存变量,变量没有变化,不会刷新页面。

    2.React 16.7 之后可以使用useState在function组件中创建state了,这样更加适合函数式编程,它综合了class的construct、setState的功能!

    3.为了避免父组件值改变,子组件很多值也会随着变化,可以用useMemo来限制父组件改变,哪些值需求重新计算。

    4. react-router-dom的使用:

     1.可以通过链接(a标签)来跳转,如:

    <a href='#/detail'>去detail</a>

     2.通过函数跳转

    <button onClick={() => this.props.history.push('detail')}>通过函数跳转</button>

    3.还可以通过Link来跳转

    <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>  //注意to的
     </li>

    如果组件之间跳转要带参数,也有几种形式。如下:

    // 通过 router的参数格式定义
    <Route exact path="/detail/:id" component={Detail}/> //在子组件可以通过useParams() 来获取id,另外可以使用useRouteMatch来获取当前的Url链接
    // 页面获取参数的链接为:http://localhost:3000/#/detail/3

    通过函数隐式传递:

     <button onClick={() => this.props.history.push({
                            pathname: '/detail',
                            state: {
                                id: 3
                            }
    //detail组件获取id的值:
    console.log(this.props.history.location.state); //3

    有时候a标签和通过函数之间进行跳转,可能会导致死循环,采用replace来中断循环。

    this.props.history.replace('/detail');

    返回上级菜单:

    场景中需要返回上级页面的时候使用:
    this.props.history.goBack();

      

  • 相关阅读:
    [Effective C++ 001]视C++为一个语言联邦
    DataGrid使用心得
    C#连接数据库(Oracle)
    一个编程菜逼当上.net程序员的故事
    ASP.NET 和 WinForm 弹出另存为对话框
    重新认识Attributes.add
    认识委托和事件
    自己写好记的Oracle的 Group By 、 Group By Rollup和Group By Cube基础
    卑微的人依然可以有美丽的梦想——一段让无数人感动的视频
    Ajax简介
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/11739692.html
Copyright © 2020-2023  润新知