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();

  

原文地址:https://www.cnblogs.com/liuyinlei/p/11739692.html