React学习笔记2

1.render函数对于props和state必须是纯函数

render函数不能改变props和state的属性，如果在render中调用setState则会陷入死循环
问题容易出现在事件绑定中onClick={this.handleClick(event)}，这个函数就会直接执行，可能会修改state或props，此时应该使用箭头函数onClick={()=>this.handleClick(event)}

2.受控组件和非受控组件

• 受控组件
  每当表单的状态变化时，都会被写入到组件的state中，消除了组件的局部状态，由组件的state来统一管理
• 非受控组件
  一个表单组件没有value属性，可以通过defaulValue设置默认值，需要使用ref props来访问DOM元素，如果ref访问的是自定义组件，则返回的是组件的实例，可以通过findDOMNode来获取DOM元素
  受控组件必须要绑定change事件，否则无法将输入值改变组件state

3.CSSModule

• 样式默认局部
  默认样式是局部的，也就是

:local(.normal){
}

全局样式可以定义为

:global(.btn){
}
:global{
}

• CSS Modules只会转变类选择器

4.React Router Redux

• 业务逻辑和路由状态有很强的关联关系，所以需要用redux来管理路由的状态
• 对Router组件来说，Router组件是一个方法，location作为参数，返回的结果就是View视图，它会根据当前url的不同，渲染出不同的组件
• 路由切换方式主要有pushState和hashChange两种方式
• Redux中要改变数据，必须分发一个action，在路由改变的时候，也要分发一个相应的action，由相应的中间件来处理这一类的action，同时改变store中的状态