决定一个人命运的不是能力而是选择
1.加快安装
npm config set registry
2.写代码过程中webstorm底部一直闪烁，代码也提示不了
File->Invalidate Cahes/Restart -> Invalidate and Restart复制代码
3.按钮未点击自动执行点击事件
handlerClick = (questionId)=>{ console.log('我执行了')}复制代码 handlerClick (questionId){ console.log('我被点击了')}复制代码 第一种和第二种是两种常见的函数定义方法，第一种是箭头函数，第二种是普通函数。推荐用箭头函数
- 避免普通函数this造成的一系列问题，而箭头函数this指向函数定义的组件
- 每次刷新组件都会重新执行bind方法，对性能有影响
但是第一种箭头函数确带来了奇怪的问题：按钮未点击handlerClick函数自动执行了，而不传参数的话是不会自动执行的，这是为什么？明明看起来两种写法差不多！在讲这个问题之前我们首先来看一下匿名函数
function (){ console.log('我执行了')}复制代码 忽略箭头函数的内部细节，我们发现其实箭头函数就是匿名函数。再来看看匿名函数是如何执行的
（function (){ console.log('我执行了')}）（）复制代码 聪明的你应该发现问题了，第一种箭头函数传参就相当于匿名函数立即执行。讲清楚了为什么会立即执行，看下如何解决
复制代码
这有什么区别？第一种箭头函数的写法等价于
onClick=(function(){ console.log('我执行了') })(questionId)复制代码 第二种等价于
onClick=function(){ return function handlerClick(questionId){ console.log('我执行了') }}复制代码 那么bind为什么不会立即执行？因为bind返回的还是函数
4.ant Design Select组件的坑
复制代码
开始allClass是空数组，等到网络请求返回allClass才有数据，然后组件会刷新。这时候很奇怪defaultValue没有刷新，莫名其妙的设置不了默认数据。会出现下图所示的情况
下面的写法可以避免这种情况
{ allClass.length !== 0 ? : }复制代码 这种写法更优雅
{ allClass.length !== 0 && }复制代码 5.react.setState()之后不能获取更新后的数据
下面获取到的count还是-1
this.state={ count = -1};this.setState({ count: 0 });console.log(this.state.count);复制代码 实际上setState并不会立马执行，它会把状态存到队列中，稍后才会更新state的值，下面的写法可以避免这种情况
this.setState({ count: 0 },() => console.log(this.state.count))复制代码 6.自己搞的简易的react Componet
export default class Component { constructor(props = {}) { this.props = props; } setState(state) { const oldEl = this.el; this.state = state; this._renderDOM(); if (this.onStateChange) this.onStateChange(oldEl, this.el); } _renderDOM() { this.el = this._createDOMFromString(this.render()); if (this.onClick) { this.el.addEventListener('click', this.onClick.bind(this), false) } ; return this.el; } _createDOMFromString = (domString) => { const div = document.createElement('div'); div.innerHTML = domString; return div; } mount = (component, wrapper) => { wrapper.appendChild(component._renderDOM()); component.onStateChange = (oldEl, newEl) => { wrapper.insertBefore(newEl, oldEl); wrapper.removeChild(oldEl); } } onStateChange(oldEl, newEl) {} render() {} onClick() {}}复制代码 7.react-router-dom使用
函数方式跳转传参this.props.history.push({ pathname: '/detail', state: { id: 3 })复制代码 防止重复跳转死循环
this.props.history.replace('/detail');复制代码 goBack返回
this.props.history.goBack();复制代码
8.redux使用,redux用于数据共享
index.js注册import counter from './reducers/index';import {createStore} from 'redux';const store = createStore(counter);const render = () => ReactDOM.render( store.dispatch({ type: 'INCREMENT'})}//action onDecrement={() => store.dispatch({ type: 'DECREMENT'})} />, document.getElementById('root'));render();store.subscribe(render);复制代码 creare函数export default (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state }}复制代码 组件 const {value, onIncrement, onDecrement} = this.props; {value}次数拉拉拉
复制代码 9.js精度问题
0.07.toFixed()*100 = 7.00000000000000001%复制代码
(0.07*100).toFixed() = 7%复制代码
好用的js方法
1.正确返回字符串长度function length(str) { return [...str].length;}复制代码 或者
function countSymbols(string) { return Array.from(string).length;}复制代码 2.判断一个字符是单字节还是双字节
function is32(c){ return c.codePointAt(0) > 0xFFFFFF;};复制代码 3.正则判断金额是否正确
let s = "1512.1";let patter = /^\d+\.?\d{1,2}$/g.test(s);复制代码 4.将数组中布尔值为false的成员转为0
Array.from([1, , 2, , 3], (n) => n || 0)复制代码
5.数组去重
[...new Set([1,2,3,4,5,2])]复制代码
6.去除重复字符串
[...new Set('ababbc')].join('')复制代码