heihei12305

备忘：

• 脚手架 npm i create-react-app

• 创建 npx create-react-app [项目名]

• pwa serviceWorker 离线应用

• jsx 同时解析 html 和 js ： 遇到 < 按照 html，遇到 { 按照 js

• 类名为 className，不能直接写class

• fragment 在最外面套一层，不会影响布局（直接套div报错）

• jsx return 为 html时，外面套上括号可支持换行

• 修改列表的值的时候，先用临时变量获取，然后修改，然后重新赋值。不允许直接操作原数据！虽然不报错，但是后期性能优化会遇到巨大障碍。

• jsx的几个坑

  • 注释：{/*第一次写注释*/} 也可以写 // 不过需要换行，建议写上面那个
  • 在jsx中css样式使用class要用className(防止与class混淆)
  • input中输入的value默认不会被解析为html，可使用 dangerouslySetlnnerHTML = { {__html: item} }来解析为html
  • label辅助标签，为了不与js中的for重复，需要使用htmlFor来代替for完成对标input的id功能。

• vscode 中的快速生成插件 simple react

  • imr import React from 'react';
  • imrc import React,{ Component } from 'react';
  • impt import Protypes from 'prop-types';
  • impc import React, { PureComponent } from 'react'
  • cc

class | extends Component {
	state = { | },
	render() {
		return ( | );
	}
}

export default |;

• ccc

class | extends Component {
	constructor(props) {
		super(props);
		this.state = { | };
	}
	render() {
		return ( | );
	}
}

export default |;

• sfc

const | = props => {
	return ( | );
};

export default |;

• cdm

componentDidMount() {
	|
}

• cwm

//WARING! To be deprecated in React v17. Use new lifecycle  static getDerivedStateFeomProps instead
componentWillReceiveProps(nextProps) {
	|
}

• gds

static getDerivedStateFromProps(nextProps, preStat) {
	|
}

• scu

shouldComponentUpdate(nextProps, nextState) {
	|
}

• cwu

//WARING! To be deprecated in React v17. Use componentDidUpdate instead
componentWillUpdate(nextProps, nextState) {
	|
}

• cdu

componentDidUpdate(prevProps, prevSatte) {
	|
}

• cwun

componentWillUnmount() {
	|
}

• cdc

componentDidCatch(error, info) {
	|
}

• gsdu

getSnapshotBeforeUpdate(prevProps, prevState) {
	|
}

• ss

this.setState({ | : | });

• ssf

this.setState(prevState => {
	return { | : prevState.| }
});

• ren

render() {
	return (
		|
	);
}

• rprop

class | extends Component {
	state = { | },
	render() {
		return this.props.render({
			|: this.state.|
		})
	}
}

• hoc

function | (|) {
	return class extends Component {
		constructor(props) {
			super(props);
		}
		
		render() {
			return < | { ...this.props} />
		}
	};
}

• proto-type 可检验传值类型
• 必须传递 可用 prototype.string.isrequired
• 组件第一次存在于DOM中，函数是不会被执行的，如果已经存在于DOM中，函数才会被执行。