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]'] }
- [path] 表示样式表
-
使用
: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({ })
注意:
this.setState({ })
方法是异步的,如果在调用完之后想立即拿到最新的state值,需要在this.setState({ },callback)
方法的第二个参数回调函数里取得最新的state值。show() { this.setState({ msg : "oooooo" },function () { console.log(this.state.msg); }) }
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()