好像有点用的react知识

react 与 reactDOM

react：负责逻辑控制，react.createElement()将页面渲染成树形模板
reactDOM：渲染器，渲染成浏览器可识别的dom

jsx

在dom元素中使用{表达式}

组件

函数式：function Component（props）{
return (…)
}
类写法：class Comp extends React.Component{
render(){
return (…)
}
}
此处略去n多基础内容

---

react 按需加载

1、需要安装react-app-rewired 以及依赖 babel-plugin-import
2、在根目录下新建文件 config-overrides.js
3、配置如下

const { injectBabelPlugin } = require('react-app-rewired);
module.exports = function(config,env){
	config = injectBabelPlugin(
		["import",{libraryName:"antd",libraryDectory:"es",style:"css"}],
		config
	)
	return config;
}

4、将package.json中的script内的react-scripts替换成react-app-rewired

pureComponen – 解决数据消耗

在使用Component或function定义的函数，即使每次数据重新赋值但值没变，组件依旧会重新渲染，此时如果使用pureComponent则只会渲染一次。

当然，若用component也可以用shouldComponentUpdate（nextProp）{} ，将数据与之前的对比，如果不一样return true；则进行渲染。
若用函数式组件则可以修改为高阶组件的方式,使用高阶组件会返回一个新的组件，16.6版本以后可用
const 组件名 = React.memo(function(props){return (…)})

pureComponent原理也是shouldComponentUpdate,而且是浅比较，所以对于多层嵌套的json来说没什么卵用

高阶组件HOC

const Comp = (props) => { retrun <div>12345-{props.name}</div> }

const Hcomp = Comp => { var name = 'test' return props => <Comp name={name}></Comp> }

Hcomp(Comp)

复合组件Composition

类似vue里面的slot
例如：定义一个组件

const Test = (props) => {
	return <div>{props.children}</div>
}

使用：<Test><h1>无论test里面包裹着什么都会被当做props.children</h1><Test>

案例：antd里面的radioGroup