(一) recompose 函数式组件，高阶组件库
(1) withState
因为函数式组件中没有state，但是更多时候是需要使用state的，所以recompose提供了withState来满足需求
withState(
stateName: string, ----------------------------------- state的名称
stateUpdaterName: string, --------------------------- 改变state的函数
initialState: any | (props: Object) => any ------------ 初始值，任意值或者父组件传的props的函数
): HigherOrderComponent
注意：
(1) 第三个参数：是函数时，参数是从父组件传过来的props
实例：
import React, { Component } from 'react';
import './App.css';
import { compose, withState } from 'recompose'; ----------- 引入recompose的两个函数
const ComponentA = (props) => { ---------------------------- 这里最好写成解构的形式，让参数透明化
return(
recompose测试
{props.name} ---------------------------------------- 通过props，获取到state的name属性的值
);
}
export default compose(
withState('name', 'changeName', 'wang'), ---------------- 使用withState(名字，函数，初始值)
)(ComponentA);
(2) withProps
withProps(
createProps: (ownerProps: Object) => Object | Object ------ withProps的参数是一个函数或者一个对象
): HigherOrderComponent
注意：
(1) withProps的参数是一个对象，或者一个函数(返回值是对象)
(2) 当withProps的参数是一个函数时，函数的参数来自于 withProps 上面的 withProps
(2) 当withProps的参数是一个函数时，函数的参数是ownerProps一个对象，函数的返回值也是一个对象
实例：
import React, { Component } from 'react';
import './App.css';
import { withProps, compose, withHandlers, withState } from 'recompose';
const ComponentA = (props) => { ------------------ 这里最好写成解构的形式，让参数透明化
console.log(props, 'props')
return(
recompose测试
语文: {props.chinese}
数学: {math}
英语: {props.english}
总分: {props.total}
);
}
const math = 100;
const getUserMessage = ({ ----------------------- withProps 对应的函数
chinese, ------------------------------------- 参数来自 ( 该withProps ) 上面的 ( withProps )
english, ------------------------------------- 参数来自 ( 该withProps ) 上面的 ( withState )
}) => {
return ({
total: chinese + english + math ---------------- withProps需要返回一个对象
})
}
export default compose(
withProps({ ---------------------------------------- withProps是一个对象
chinese:20
}),
withState('english', 'changeScore', 80),
withProps(getUserMessage), ------------------------- withProps是一个函数
)(ComponentA);
(3) withHanders
withHandlers(
handlerCreators: { ------------------------------------- withHanders接受一个 handlerCreators
[handlerName: string]: (props: Object) => Function --------------- 返回一个操作函数
} |
handlerCreatorsFactory: (initialProps) => { ------------- withHanders接受一个 工厂函数
[handlerName: string]: (props: Object) => Function
}
): HigherOrderComponent
注意：
(1) withHanders接收一组 handler creator 或 工厂函数. 这些函数是高阶函数, 接收一组props,返回操作函数
(2) 操作函数可能有定义好的参数，比如antd中验证的回调函数，自带的参数，再比如onClick函数的e参数
实例：
import React, { Component } from 'react';
import './App.css';
import { withProps, compose, withHandlers, withState } from 'recompose';
const math = 100;
const ComponentA = (props) => {
console.log(props, 'props')
return(
recompose测试
语文: {props.chinese}
数学: {math}
英语: {props.english}
总分: {props.total} ----- 点击执行withHanders
);
}
const getUserMessage = ({
chinese,
english,
}) => {
return ({
total: chinese + english + math
})
}
export default compose(
withProps({
chinese:20
}),
withState('english', 'changeScore', 80),
withProps(getUserMessage),
withHandlers({ ------ withhander接受一个高级函数，参数是 props，返回操作函数，操作函数有自己的参数
handleChangeScore: props => e => { ----------------- 函数名是 handleChangeScore，返回操作函数
console.log(e.target);
return props.changeScore(n => n = 20) ------------ changeScore是withState中的函数
} ------------------------------ changeScore中的参数就是对应的withState中对应的 state
})
)(ComponentA);
(4) lifecycle
生命周期函数
这是高阶组件版本的React.Component(),支持除了render()之外的所有Component API, render()方式是默认实现的. 任何lifecycle()方法引起的 state改变, 会传递给包装组件
lifecycle(
spec: Object, ----------------------------------- 一个对象
): HigherOrderComponent
注意：参数是一个对象
实例：
import React, { Component } from 'react';
import './App.css';
import { withProps, compose, withHandlers, withState, lifecycle } from 'recompose';
const math = 100;
const ComponentA = (props) => {
console.log(props, 'props')
return(
recompose测试
语文: {props.chinese}
数学: {math}
英语: {props.english}
总分: {props.total}
);
}
const getUserMessage = ({
chinese,
english,
}) => {
return ({
total: chinese + english + math
})
}
export default compose(
withProps({
chinese:20
}),
withState('english', 'changeScore', 80),
withProps(getUserMessage),
withHandlers({
handleChangeScore: props => e => {
console.log(e.target);
return props.changeScore(n => n = 20)
}
}),
lifecycle({ -------------------------------- 函数式组件的生命周期函数
componentDidMount(){
console.log('aaaaaaaaaaaaa')
}
})
)(ComponentA);
https://juejin.im/entry/5a28fc076fb9a04511710659
https://note.pcwu.net/2017/03/11/react-recompose/
http://functional-programming.cn/t/topic/70
老是记不住的git，多写几遍
新建文件夹：mkdir B
新建文件： touch a.txt
删除文件：rm a.txt
修改文件内容： vim a.txt
查看当前路径： pwd
把远程某个分支拉取到本地不存在的分支：
git checkout -b 本地分支名 origin/远程分支名
例如： git checkout -b dev origin/dev --------------把远程的dev分支拉取到新建的本地分支dev中
git checkout -b dev用该命令新建分支并切换到新分支时，是基于当前分支，即新分支和当前分支内容同步
删除本地分支： git branch -d 本地分支名
强行删除本地分支：git branch -D 本地分支名
删除远程分支： git push origin --delete 远程分支名
合并分支：git merge dev ----------------------- 将dev分支合并到当前分支
git rebase dev ------------------------ 消除分叉
查看所有分支最后一次提交信息： ---------------------- git branch -a -vv
查看提交历史： git log --graph --pretty=oneline --abbreve-commit
把本地代码上传到github
(1) 在github上新建项目
(2) git init,add,commit后使用命令 ----- git remote add origin https://github.com/woow-wu/g.git
(3) git push -u origin master
git pull = git fetch + git merge
git pull <远程主机名> <远程分支名> : <本地分支名>
git push <远程主机名> <本地分支名> : <远程分支名>
git pull origin master:dev ------------ 取回origin主机的master分支，与本地的dev分支合并
git fetch origin master:dev
git diff dev
git merge dev
git pull --rebase
git pull = git fetch + git merge
git pull --rebase = git fetch + git rebase
查看远程库： git remote
查看远程库详细信息： git remote -v
( 本地分支关联远程分支 ------------ git branch --set-upstream )
( 关联的目的：关联目的是在执行git pull, git push操作时就不需要指定对应的远程分支 ！！！！)
( git branch --set-upstream-to=origin/dev dev ----- 关联本地dev和远程dev )
( git branch --set-upstream-to=origin/remote_branch your_branch )
( upstream是向上，逆流向上的意思 )
!!!!!!!!!!!!!!!!!!!!!!! git rebase !!!!!!!!!!!!!!!!!!!!!!!!!!
(1) 合并多个commit为一个完整的commit
git rebase -i [startpoint] [endpoint]
或者 git rebase -i HEAD~3 ...
或者 git rebase -i master ----------------------- 从master分支开始
其中-i的意思是--interactive，即弹出交互式的界面让用户编辑完成合并操作
[startpoint] [endpoint]则指定了一个编辑区间，
如果不指定[endpoint]，则该区间的终点默认是当前分支HEAD所指向的commit
[ 注意：是前开后闭的区间，即前面的提交取不到，可以使用git rebase -i 分支来实现前闭后闭 ]
pick : 保留该commit
squash：将该commit和前一个commit合并 ----------------- squash挤进挤入的意思
(2) 将某一段commit粘贴到另一个分支上
....
!!!!!!!!!!!!!!!!!!!! git push --force !!!!!!!!!!!!!!!!!!!!
git push -f origin features/my_branch
只會強制更新 features/my_branch 這個分支的內容，不會影響其它分支。
!!!!!!!!!!!!!!!!!!!! git reset !!!!!!!!!!!!!!!!!!!!
(1) git reset --mixed
(2) git reset --hard
(3) git reset --soft
HEAD -------------表示当前版本
HEAD^ -------------表示上一个版本
HEAD^^ -------------表示上上个版本
HEAD~100 -----------表示上100个版本
git reflog ---------记录你的每一次命令，查看命令历史
git reset --mixed commitId
回退一个版本,且会将暂存区的内容和本地已提交的内容全部恢复到未暂存的状态,不影响原来本地文件
(未提交的也不受影响)
git reset –soft HEAD~1
回退一个版本,不清空暂存区,将已提交的内容恢复到暂存区,不影响原来本地的文件(未提交的也不受影响)
git reset --hard commitId
回退一个版本,清空暂存区,将已提交的内容的版本恢复到本地,本地的文件也将被恢复的版本替换
``
!!!!!!!!!!!!!!!!!!!! git reset HEAD !!!!!!!!!!!!!!!!!!!!
git reset HEAD 撤销暂存区的修改
git reset HEAD 可以把暂存区的修改撤销掉（unstage），重新放回工作区
场景1：当你改乱了工作区某个文件的内容，想直接丢弃工作区的修改时，用命令git checkout -- file
场景2：当你不但改乱了工作区某个文件的内容，还添加到了暂存区时，想丢弃修改，分两步，
第一步用命令git reset HEAD ，就回到了场景1，
第二步按场景1操作。
!!!!!!!!!!!!!!!!!!!! git checkout -- file !!!!!!!!!!!!!!!!!!!!
git checkout -- file 撤销工作区的修改
git checkout -- test.txt 将test.txt文件在工作区的修改全部撤销掉，分两种情况：
(1) test.txt修改后，未放到暂存区，撤销修改后，回到版本库一模一样的状态
(2) test.txt修改后，添加到了暂存区，再做了些修改，撤销修改后，回到暂存区一样的状态
总之：就是让这个文件回到最近一次git add 或者 git commit时的状态。
- git rebase详解：
https://www.jianshu.com/p/4a8f4af4e803
https://www.cnblogs.com/wangiqngpei557/p/5989292.html
https://blog.csdn.net/wh_19910525/article/details/7554489 - git pull --rebase
https://blog.csdn.net/github_36601823/article/details/71078069
https://blog.csdn.net/nathan1987_/article/details/81630212 - git push --force
https://gitbook.tw/chapters/github/using-force-push.html - git fetch 和 git pull 的区别
https://blog.csdn.net/riddle1981/article/details/74938111 - git pull命令
https://www.yiibai.com/git/git_pull.html - git push命令
https://blog.csdn.net/hobhunter/article/details/79463168 - git reset 【 git reset --mixed 和 git reset --soft 和 git reset --hard 】
git reset --mixed commitId 回退版本，将暂存区和本地提交的内容全部恢复到未暂存状态，不影响原来本地文件
git reset --soft commitId 回退版本，不清空暂存区，将已提交的内容恢复到暂存区，不影响原来本地的文件
git reset --hard commitId 回退版本，清空暂存区，将已提交的内容恢复到本地，影响原来本地的文件
https://www.cnblogs.com/kidsitcn/p/4513297.html
void 0
- void是一元操作符，出现在操作数的左边，操作数可以是任意类型的值
- void右边的表达式
可以是带括号形式（例如：void(0)）
也可以是不带括号的形式（例如：void 0） void操作符的作用是返回undefined，右边的操作数正常计算，但无论计算结果是什么，void 都会返回 undefined-
void操作符总是返回 undefined。
(一) void操作符的作用：
(1) 代替undefied
(2) 填充的href确保点击时不会产生页面跳转;
(3) 填充
(二) 用 void 0 代替 undefined 的好处：
- 防止undefined被重写------------ 非严格模式下可以重写，严格模式不能重写。
- 节省字节----------------------------- void 0代替undefined省3个字节。
https://segmentfault.com/q/1010000007406985
https://blog.csdn.net/mm19931027/article/details/73136339
!!10 将其他类型的值，强制转换成布尔值
!!10 ---------- true
- 值的类型转换：分为显示转换，和隐式转换
- 强制转换有三个函数：Number，String，Boolean
Boolean转换：undefined， null， ''， NaN， +0或者-0 -----------------只有这5个是false，其他都是true
Number(undefined) ----------- NaN
Number(null)----------------- 0
var a = '4'-'3'; -------------- 隐式转换，减法运算符两边预期是数值，js会自动将字符串转成数值
typeof a // 'number'
var a = '111' + 0 ; //a的结果为数值型;
var b = 111 + '' ; //b的结果为字符串类型;
https://blog.csdn.net/qq_31411389/article/details/70332999
dangerouslySetInnerHTML
顶顶顶顶顶顶顶顶顶顶'}}>