react入门笔记3

1. 设置样式

使用普通的 style 样式

<h1 style={ {color: 'red', fontWeight: 200} }></h1>

启用 css-modules

修改 webpack.config.js这个配置文件，为 css-loader 添加参数：

{ test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 为 .css 后缀名的样式表  启用 CSS 模块化
//固定参数modules，表示为普通的css样式表启用模块化

在需要的组件中，import导入样式表，并接收模块化的 CSS 样式对象：
```
import cssObj from '../css/CmtList.css' 
```
在需要的HTML标签上，使用className指定模块化的样式：
```
<h1 className={cssObj.title}>评论列表组件</h1>
```

使用localIdentName自定义生成的类名格式，可选的参数有：
- [path] 表示样式表 相对于项目根目录 所在路径
- [name] 表示样式表文件名称
- [local] 表示样式的类名定义名称
- [hash:length] 表示32位的hash值
- 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }
使用 :local() 和 :global()
- :local()包裹的类名，是被模块化的类名，只能通过className={cssObj.类名}来使用
  
  同时，:local默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；
- :global()包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名className="类名"
注意：只有.title这样的类样式选择器，才会被模块化控制，类似于body这样的标签选择器，不会被模块化控制；

在项目中启用模块化并同时使用bootstrap

把自己的样式表，定义为 .scss 文件
第三方的样式表，还是以 .css 结尾
我们只需要为自己的 .scss 文件，启用模块化即可；
运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader

添加loader规则：

{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包处理 scss 文件的 loader

2. React 中绑定事件的注意点

事件的名称都是React的提供的，因此名称的首字母必须大写onClick、onMouseOver
为事件提供的处理函数，必须是如下格式
```
onClick= { function }
```

用的最多的事件绑定形式为：

<button onClick={ () => this.show('传参') }>按钮</button>

// 事件的处理函数，需要定义为 一个箭头函数，然后赋值给 函数名称
show = (arg1) => {
    console.log('show方法' + arg1)
}

在React中，如果想要修改 state 中的数据，推荐使用 this.setState()
```
show() {
	this.setState({
		msg : "oooooo"
	}
}
```
这种用法有一个缺陷，就是使用this.setState修改this.state之后，页面并不会立即重新渲染，而是等组件的render方法重新执行的时候才会去重新渲染页面。这样，多次调用this.setState产生的效果会合并。

关于this.setState推荐一篇好文章：setState：这个API设计到底怎么样

如果想要this.setState的效果立即生效，就要使用它的函数式用法:
```
this.setState(() => {
  return {
    msg : "oooooo"
  }
});
```
可以简写成：
```
this.setState(() => ({
    value: myValue
}));
```
this.setState可以有一个prevState参数：
```
this.setState((prevState) => ({  //prevState 等价于 this.state
  //...
}));
```
this.setState还可以有一个回调函数：
```
this.setState((prevState) => ({
  //...
}), () => {
  console.log('这是回调函数');
});
```

3. 绑定文本框与state中的值（单向数据流）

在 Vue 中，默认提供了v-model指令，可以很方便的实现 数据的双向绑定；
但是，在 React 中，默认只是单向数据流，也就是只能把 state 上的数据绑定到页面，无法把页面中数据的变化，自动同步回 state ；如果需要把页面上数据的变化，保存到 state，则需要程序员手动监听onChange事件，拿到最新的数据，手动调用this.setState({ }) 更改回去；
案例：

如果我们只是把文本框的 value 属性，绑定到了 state 状态，但是，如果不提供 onChagne 处理函数的话，得到的文本框，将会是一个只读的文本框
当为文本框绑定 value 值以后，要么同时提供一个 readOnly，要么，提供一个 onChange 处理函数

<input type="text" name="" id="" value={this.state.msg}/>
//Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. 
//This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

绑定一个onChange方法后：

<input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={() => this.textChanged()} ref="mytxt" />

 // 响应 文本框 内容改变的处理函数
  txtChanged = (e) => {
 // 在 onChange 事件中，获取 文本框的值，有两种方案：
 // 方案1： 通过 事件参数 e 来获取；
 // console.log(e.target.value);
  // 方案2： 通过 ref 获取；
 // console.log(this.refs.txt.value)

 const newVal = e.target.value

 this.setState({
   msg: newVal
 })
}

4. 使用ref获取DOM元素引用

和 Vue 中差不多，vue 为页面上的元素提供了 ref 的属性，如果想要获取元素引用，则需要使用this.$refs.引用名称

在 React 中，也有 ref, 如果要获取元素的引用this.refs.引用名称

5. 组件的生命周期

生命周期的概念：每个组件的实例，从创建、到运行、直到销毁，在这个过程中，会出发一些列事件，这些事件就叫做组件的生命周期函数；
React组件生命周期分为三部分：
- 组件创建阶段：特点：一辈子只执行一次
componentWillMount:
render：
componentDidMount:
- 组件运行阶段：按需，根据 props 属性或 state 状态的改变，有选择性的执行 0 到多次
componentWillReceiveProps:
shouldComponentUpdate:
componentWillUpdate:
render:
componentDidUpdate:
- 组件销毁阶段：一辈子只执行一次
componentWillUnmount:

在这里插入图片描述

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：
在这里插入图片描述

组件生命周期的执行顺序：

Mounting：
- constructor()
- componentWillMount()
- render()
- componentDidMount()
Updating：
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render()
- componentDidUpdate(prevProps, prevState)
Unmounting：
- componentWillUnmount()