itembank常见错误积累

itembank issue

错误

“Invalid Host Header” in When running React App

devServer: {
  disableHostCheck: true,  // 不设置会报错
  host:'0.0.0.0'   // 0.0.0.0的话别人的电脑也可以打开你的开发中的页面,不安全
}

组件引入错误

1. 组件忘记引入
2. 组件和自定义标签首字母大写
3. return 一个根元素, 根元素前面不能有判断或短路&&

React合成事件

回调函数要注意事件的绑定(三种方法)

1. 在constructor中this.fn.bind(this)
2. class中用箭头函数来声明
3. 在onClick={()=>this.fn()}

合成API和原生API混用要注意

setState的异步更新细节

父组件state->子组件props

// 数据流单向传递, 父影响子元素中引用父state的刷新

React中的自定义事件

只能放在原生的元素上, 组件上不能用绑定事件处理程序
所以可以父传递回调给子, 在子上onClick

积累

对比工具icdiff (类webstorm中的对比工具)

icdiff

# 在Git中用
git icdiff 
# 比较普通文件
icdiff A B

React组件import后名称问题

模块可以自定义, 但渲染出来还是定义时的类名

// StickyDiv.js
export default class GlsStickyDiv extends Component {
  render() {
    return (
      /* someting */
    )
  }
}
// other.js 
import StickyDiv from 'components/glsMobile/StickyDiv'
<StickyDiv></StickyDiv>
// ChromeDevTool中
<GlsStickyDiv></GlsStickyDiv>

React