react笔记

官方文档

1. react

1. react：dangerouslySetInnerHTML

设置目标标签的innerHTML属性，通过此方法传入的数据，不会被转译。也就是说，若数据中含有html标签，则会在页面显示出来，而不是含有标签的字符串。

<content dangerouslySetInnerHTML={{__html: '<div style="color:red">asd</div>'}}/>

2. react-router-dom：动态路由

http://192.168.1.102:3000/detail/id=a

<Route path='/detail/id=:id' exact component={Pages.Detail}></Route>

class Detail extends Component {
	constructor(props) {
		super(props);
        console.info(this.props.match.params.id);	// a
	}
}

http://192.168.1.102:3000/detail?id=a

<Route path='/detail' exact component={Pages.Detail}></Route>

class Detail extends Component {
	constructor(props) {
		super(props);
        console.info(this.props.location.search);	// ?id=a
	}
}

3. styled-components：[Deprecated] innerRef

innerRef：styled-components官方文档
ref可以直接获得由styled-components创建的标签，innerRef已经被放弃。

// ./style.js
import styled from 'styled-components';
export const Input = styled.input`
	// ······
`;

// ./App.js
import Input from './style.js';
class Essay extends PureComponent {
	render() {
		return <Input ref={(e)=>{this.input=e}}/>
	}
}

4. react-router-dom：重定向

import { Redirect } from "react-router-dom";
class Detail extends PureComponent {
    render() {
        return <Redirect to='/' />
    }
}

5. react-router-dom：withRouter

若当前组件无法通过props获取路由信息时，使用withRoute可以获得路由的所有参数。

import { withRouter } from 'react-router-dom';
class Detail extends PureComponent {
	render() {
        console.info(this.props.match.params.id);
		return ()
	}
}
export default withRouter(Detail)

6. react-loadable：异步加载组件

react默认一次性缓存所有组件文件，这样会使得首页加载缓慢。使用react-loadable，当需要加载某个组件时，才会获取组件文件。

// ./Home/loadable.js
import React from "react";
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./index.js'),
    loading() {
        return <div>正在加载</div>
    }
});
export default () => <LoadableComponent/>

// ./index.js
// import { Home } from './Home/index.js';
import { Home } from './Home/loadable.js';

7. react：Component 和 PureComponent

React.PureComponent与React.Component很相似。两者的区别在于React.Component并未实现shouldComponentUpdate()，而React.PureComponent中以浅层对比prop和state的方式来实现了该函数。
React.PureComponent中的shouldComponentUpdate()仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。仅在你的props和state较为简单时，才使用React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate()来确保组件被正确地更新。