jsx中的行内样式
直接写在标签中：
格式：style = {{}}
抽离样式成一个变量
抽离样式成一个单独文件
ComListItemStyle.js
ComListItem.jsx
通过样式表使用样式
原因：通过写行内样式太麻烦，通过样式表来开发更符合实际
准备
因为webpack无法解决.css文件，因此还有下载解决css文件的相关loader
执行命令 npm i –D style-loader css-loader
并配置webpack.config.js文件
创建css文件夹
样式定义
导入样式表文件
引用样式表 => ComListClass.jsx
网页上引用的样式表
可以看出其实是在网页的全局上定义了一个title类
reactjs解决css样式表全局作用域的问题：
启用css选择器模块化
通过给css-loader追加参数modules启用css-loader的模块化
也可以写成下面的形式
导入样式模块
打印comListCss
引用样式表
网页上引用的样式表
可以看出其实是在网页全局上定义了一个由hash值构成名称的类
这个hash名称对应的就是title
注意点：这个css选择器的模块化只对类选择器和id选择器有效
补充：自定义通过hash值生成的类名
css-loader再追加参数localIdentName
参数定义：
[path]:相对于根路径的所在路径 这里根路径是src
[name]：样式表文件的名称
[local]：样式类的名称或者id名称
[hash:number]：表示8位的hash值
取消模块化
:global(.title){font-sze:12px}
被:global()包裹起来后就不会模块化
而被:local()包裹则会模块化，开启modules后，默认省略不写
解决打包第三方样式表时也会默认模块化打包的问题
当我们要用bootstrap时，因为样式文件结尾也是css，因此也会被模块化打包
到时要引用bootstrap样式时就会造成不必要的麻烦。
可以通过重新配置规则来解决，定义自定义的样式表使用scss或者less编写，而第三方样式表
使用css。因此只需给scss、或者less模块化即可。
记得先安装scss或者less的相关loader
reactjs的事件绑定
reactjs有自己的一套事件定义
例如 ：点击事件的名称为：onClick 鼠标移入事件：onMouseOver
在组件中使用事件绑定：
调用组件内部实例方法记得要用this关键字调用
基本格式 onClick = {function} 接收参数function
使用方法1：onClick = {this.clickAlert} 没法加小括号，若加小括号会在加载页面时直接执行函数，因此没法传递参数
使用方法2：onClick = {() => {this.clickAlert(message)}} 可以实现函数传参，用得最多
响应式修改this.state属性的值
如果直接通过this.state.message = ‘666’这样修改，虽然改变了state中的值，但是不会响应式更新页面中的数据
而调用reactjs组件中的setState()函数可以做到响应式
注意点：这里setState更新message不会覆盖掉name属性，而且setState的方法是异步的，若要获取setState函数处理后的结果，得传入callback参数，并且在callback函数中获取结果
表单数据的双向绑定
react没有类似v-model的功能，需要自己实现双向数据绑定
通过onChange事件监听实现，将页面数据绑定进state中的功能
方法1：通过事件对象e.target.value
方法2：通过refs获取dom元素，来获取value值 => 类似vue的$refs
(1) html上绑定ref属性 ref=’txt’ (2) this.refs.txt.value