react小知识点集合

1：路由传递参数的两种形式

get 传值 通过query
<Link to={`/newsdetail?newid=${item.id}`}>{item.title}</Link>

接收
var search = this.props.location.search;

使用url库解析
npm install url --save
import url from 'url';
var search = this.props.location.search;
var newid = url.parse(search, true).query.newid;

-----------------------------------------------------------------

动态路由传值 通过params
<Route path="/newsdetail/:newid" component={NewsDetail}/>
<Link to={`/newsdetail/${item.id}`}>{item.title}</Link>

接收
var newid = this.props.match.params.newid;

-----------------------------------------------------------------

　　**访问方式** 通过state
　　<Link to={{pathname:'/contact',query:{id:'456'}}}>contact</Link>或者
　　this.props.history.push({pathname :'/contact',query :{id:'456'}})
　　**contact页面获取参数**
　　componentDidMount(){
　　　　console.log(this.props.location.state.id);
　　}

2：React.PureComponent 与React.Component的区别

1：React.Component 并未实现 shouldComponentUpdate()，
(为什么要使用PureComponent)
解决：父组件更新了state，传递给子组件的数据并没有改变，但是子组件也会跟着从新渲染
(不使用该组件的话，需要手动在组件内使用shouldComponentUpdate进行判断)

使用PureComponent的缺点在于他是浅拷贝

而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数

**如果赋予 React 组件相同的 props 和 state，render() 函数会渲染相同的内容，
那么在某些情况下使用 React.PureComponent 可提高性能

 3：React组件的通信方式

父 -> 子：props ref(组件上面使用,返回的组件的实例)

子 -> 父：props + 回调

跨层级通信：context redux 

 

 4：路由相关知识记录

1：Link组件也必须包含在Router组件当中使用

2：当使用嵌套路由时，父路由不能设置exact属性