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