文章目录
样式的模块化
由于样式最终都会汇总在一个文件夹中,所以如果不同组件的css文件中的样式重名就会产生样式冲突,为了避免冲突我们可以使用样式的模块化。
- css文件名添加module关键词,eg:
index.css => index.module.css
- 引入样式的时候可为其命名(如 hello), 使用该样式表中的样式的时候只需 hello.样式名即可。
eg:
Hello.module.css
.title{
background-color: orange;
}
同级目录下的 index.jsx
import React,{
Component} from "react"
import hello from './Hello.module.css'
export default class Hello extends Component{
render(){
return <h2 className={
hello.title}>Hello,React</h2>
}
}
react好用的插件
快捷键指引:https://github.com/chillios-ts/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md
功能界面的组件化编码流程
- 拆分组件
拆分界面,抽取组件 - 实现静态组件
使用组件实现静态页面效果 - 实现动态组件
- 动态显示初始化数据: 数据类型、数据名称
- 交互(从绑定事件监听弃始)
小结
-
拆分组件、实现静态组件,注意: className、 style的写法
-
动态初始化列表,如何确定将数据放在哪个组件的state中?
- 某个组件使用:放在其自身的state中
- 某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)
-
关于父子之间通信:
- 【父组件】给【子组件】传递数据:通过props传递
- 【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数
-
注意defaultchecked 和 checked的区别,类似的还有: defaultValue 和 value5.状态在哪里,操作状态的方法就在哪里
defaultChecked 只在第一次渲染的时候起作用
checked 的使用必须配合 onChange使用