样式的模块化、功能界面的组件化编码流程

样式的模块化

由于样式最终都会汇总在一个文件夹中，所以如果不同组件的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

功能界面的组件化编码流程

1. 拆分组件
   拆分界面,抽取组件
2. 实现静态组件
   使用组件实现静态页面效果
3. 实现动态组件

• 动态显示初始化数据: 数据类型、数据名称
• 交互(从绑定事件监听弃始)

小结

1. 拆分组件、实现静态组件，注意: className、 style的写法

2. 动态初始化列表，如何确定将数据放在哪个组件的state中?

   • 某个组件使用:放在其自身的state中
   • 某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)

3. 关于父子之间通信:

   • 【父组件】给【子组件】传递数据:通过props传递
   • 【子组件】给【父组件】传递数据:通过props传递，要求父提前给子传递一个函数

4. 注意defaultchecked 和 checked的区别，类似的还有: defaultValue 和 value5.状态在哪里，操作状态的方法就在哪里
   defaultChecked 只在第一次渲染的时候起作用
   checked 的使用必须配合 onChange使用

   扫描二维码关注公众号，回复： 14958692 查看本文章