分支命令
git flow规范
分支：
mastet/main： 主分支(上线及发测试环境)
release：预发布(预上线)
feature: 临时分支 项目类型+时间
hotfix：线上有bug修改bug的分支
devlop：开发分支(用来测试的)
提交git：
feat：有新功能，新特性
用法：git commit -m "feat:描述文字"
fit ：改bug
用法：git commit -m "fit:描述文字"
perf：更改代码，提升性能
用法：git commit -m "perf:描述文字"
refactor：代码重构
用法：git commit -m "refactor:描述文字"
docs：文档修改
用法：git commit -m "docs:描述文字"
其他：
dist目录：打包之后
切分支：最好从主分支去切
每天多次提交代码 尽量3次以上
必用
必背
* master: 主分支(上线)
* hotfix: 线上有bug 修改bug的分支
* release: 预发布 (预上线)
* develop: 开发分支
* feature 项目类型 + 时间: feature/项目名0530
一个项目下来 基于 master 创建一个 feature/项目名0530, 如果多人开发 基于 feature/项目名0530 创建自己的分支
* feat: 新功能 新特性 (git commit -m 'feat: 描述文字')
fix: 修改 bug
perf: 更改代码 以提高性能(在不影响代码内部行为的前提下 对程序性能进行优化)
refactor: 代码重构(重构 在不影响代码内部行为 功能下的代码修改)
docs: 文档修改
生命周期16.4之前与16.4之后
react
1. class 类组件
2. 函数组件 函数名大写
3. use 自定义 hook
* state
* 方法 事件
* 传值
* 生命周期
16.4之前
三个阶段
加载阶段
constructor
render
componentDidMount
更新阶段
shouldComponentUpdate(nextProps, nextState)
return false 组件不渲染
return true 组件才会渲染
render
componentDidUpdate
卸载阶段
componentWillUnmount
16.4之后
三个阶段
加载阶段
constructor
getDerivedStateFromProps
render
componentDidMount
更新阶段
getDerivedStateFromProps
shouldComponentUpdate(nextProps, nextState)
return false 组件不渲染
return true 组件才会渲染
render
getSnapshotBeforeUpdate
componentDidUpdate
卸载阶段
componentWillUnmount
class组件 生命周期
import React, { Component } from 'react';
import Abc from './components/abc';
/*
react
1. class 类组件
2. 函数组件 函数名大写
3. use 自定义 hook
* state
* 方法 事件
* 传值
* 生命周期
!!! **面试必背
16.4之前
三个阶段
加载阶段
constructor
render
componentDidMount
更新阶段
shouldComponentUpdate(nextProps, nextState)
return false 组件不渲染
return true 组件才会渲染
render
componentDidUpdate
卸载阶段
componentWillUnmount
16.4之后
*
*/
export default class Info extends Component {
constructor(props) {
console.log('constructor');
// 构造函数
// 子类没有自己的 this,
super(props);
this.state = {
user: '小花',
age: 25,
};
}
componentDidMount() {
console.log('componentDidMount');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true;
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
onClick = () => {
this.setState({
user: '小白',
});
};
onClick2 = () => {
this.setState({
age: this.state.age + 1,
});
};
render() {
const { user, age } = this.state;
console.log('render');
return (
<div>
<h1 onClick={this.onClick}>user: {user}</h1>
<h1 onClick={this.onClick2}>age: {age}</h1>
<Abc age={age} />
</div>
);
}
}
子组件
import React, { Component } from 'react';
export default class Abc extends Component {
shouldComponentUpdate(nextProps, nextState) {
// this.props 取上一次的 props
if (nextProps.age === this.props.age) {
console.log('不渲染');
return false;
}
return true;
}
onClick = () => {
console.log(1111);
};
render() {
const { age } = this.props;
console.log('我是子组件, 我渲染了');
return (
<div>
<h1>age: {age}</h1>
</div>
);
}
}
16.4之后
子组件
import React, { Component } from 'react';
export default class Abc extends Component {
state = {
sex: '男',
age1: 0,
};
static shouldComponentUpdate(nextProps, state) {
// 作用 ：修改 state
// 没有this
// 必须有 return
// 必须 初始化 state
console.log(nextProps, 'nextProps');
console.log(state, 'state');
return {
age1: nextProps.age,
};
return null;
}
shouldComponentUpdate(nextProps, nextState) {
// this.props 取上一次的 props
if (nextProps.age === this.props.age) {
console.log('不渲染');
return false;
}
return true;
}
onClick = () => {
console.log(1111);
};
render() {
const { age } = this.props;
return (
<div>
<h1>age: {age}</h1>
<h1>age1: {this.state.age1}</h1>
</div>
);
}
}
