Day11. React写样式

先补充两个东西

fragments的使用

• 代替最外层包裹的div, jsx里面只能有一个东西, 不然报错
• 可以用另一个东西替换掉, 就像小程序里面提供一个block, React提供好了, 帮助不显示不需要的

// 最基本的使用

  
当前计数: 2


// 还有一种写法 => 短语法
<>
  
当前计数: 2


// 有些情况不能写成短语法
// 给列表添加一个唯一的key, diff算法优化, 短语法的写法不能添加属性, 只能用Fragment

短语法不能添加属性.png

StrictMode, 严格模式

• 重零开始创建一个项目, 默认会有
• StrictMode是一个用来突出显示应用程序中潜在问题的工具:
• • 与Fragment一样, StrictMode不会渲染任何可见的UI;
• • 它为其后代元素触发额外的检查和警告;
• • 仅在开发模式下运行, 不会影响生产构建

• 可以为应用程序的任何部分启用严格模式:

  
  
  部分启用.png

严格模式检查的是什么?

1. 识别不安全的生命周期, 如componentWillMount
   
   不使用严格模式也会报这样的警告.png
2. 使用过时的ref API

• ref字符串的形式已经不推荐使用了

  
  
  image.png

3. 检查以外的副作用

• • 这个组件的constructor会被调用两次;
• • 这是严格模式下故意进行的操作, 让你来查看在这里写的一些逻辑代码被调用多次是, 是否会产生一些副作用;
• • 在生产环境中, 是不会被调用两次的;

4. 使用废弃的findDOMNode方法

• • 在之前的React API中, 可以通过findDOMNode来获取DOM, 不过已经不推荐使用了

5. 检测过时的context API

• • 早期的Context是通过static属性生命Context对象属性, 通过getChildContext返回Context返回Context对象等方式来使用Context的;
• • 目前这种方式已经不推荐使用, 严格模式可以帮助检查出来.

React中的样式

组件化天下的CSS

• 整个前端已经是组件化的天下:

• • 而CSS(层叠样式表)的设计就不是为组件化而生的, 所以在目前组件化的框架中都在需要一种合适的CSS解决方案.

    
    
    层叠样式表.png
• 在组件化中选择合适的CSS解决方案应该符合以下条件:
• • 可以编写局部CSS: CSS具备自己的局部作用域, 不会随意污染其他组件内的原生;
• • 可以编写动态的CSS: 可以获取当前组件的一些状态, 根据状态的变化生成不同的CSS样式;
• • 支持所有的CSS特性: 伪类、动画、媒体查询等;
• • 编写起来简洁方便、最好符合一贯的CSS风格特点;

React中的CSS

• 事实上, CSS一直是React的通电, 也是被很多开发者吐槽诟病的一个点.
• 在这一点上, Vue做的确实要好于React
• • Vue通过在.vue文件中编写标签来编写自己的样式;
• • 通过是否添加scoped属性来决定编写的样式是全局有效还是局部有效;
• • 通过lang属性来设置你喜欢的less、sass等预处理器;

• • 通过内联样式风格的方式来根据最新状态设置和改变CSS;

    
    
    Vue的解决方案.png

• Vue在CSS上虽然不能称之为完美, 但使已经足够简洁自然方便了, 至少统一的样式风格不会出现多个开发人员, 多个项目采用不一样的样式风格.

  
  
  React.png

内联样式

• 内联样式是官方推荐的一种CSS样式的写法:
• • style接受一个采用小驼峰命名属性的JavaScript对象, 而不是CSS字符串;

• • 并且可以引用state中的状态来设置相关的样式;

    
    
    image.png
• 内联样式的优点:
• • 内联样式, 样式之间不会有冲突
• • 可以动态获取当前state中的状态
• 内联样式的缺点:
• • 写法上都需要使用驼峰标识
• • 某些样式没有提示
• • 大量的样式, 代码混乱
• • 没写样式无法编写(比如伪类/伪元素)
• 所以官方依然是希望内联样式和普通的CSS来结合编写;

普通的CSS

image.png

• CSS导入了才会生效, 样式层叠, 权重高的覆盖权重低的

文件夹整理.png

样式层叠.png

css modules

• css modules并不是React特有的解决方案, 而是所有使用了类似于webpack配置的环境下都可以使用.
• • 但使, 如果在其他项目中使用, 我们需要自己来进行配置, 比如配置webpack.config.js中的modules: true等.

• React的脚手架已经内置了css modules的配置:

  
  
  image.png
• css modules确实解决了局部作用于的问题, 也是很多人喜欢在React中使用的一种方案.
• 但使这种方案也有自己的缺陷:
• • 引用的类名, 不能使用连接符(.home-title), 在JavaScript中是不识别的;
• • 所有的className都必须使用{style.className}的形式来编写;
• • 不方便动态的去修改某些样式

image.png

唯一性.png

依然需要配合内联样式.png

认识CSS in JS

• 实际上, 官方文档也有提到过CSS in JS的方案:
• • 是指一种模式, 其中CSS由JavaScript生成而不是在外部文件中定义;

image.png

• 在传统的前端开发中, 我们通常会将结构(HTML)、样式(CSS)、逻辑(JavaScript)进行分离.
• • 但是React的思想中认为逻辑本身和UI是无法分离的, 所以才会有了JSX的语法.
• • 样式也是属于UI的一部分
• • 事实上CSS-in-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式, 并且可以方便的使用JavaScript的状态;
• • 所以React也被人称之为All in JS

• 当然, 这种开发的方式也受到了很多的批评:

  
  
  image.png

认识styled-components

• 批评声音虽然有, 但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便:

  
  
  image.png
• 目前比较流行的CSS-in-JS的库有哪些呢?
• • styled-components
• • emotion
• • glamorous
• 目前可以说styled-components依然是社区最流行的CSS-in-JS库
• yarn安装 yarn add styled-components

补充: 模板字符串

image.png

styled-components的使用

h2设置过样式*1.5.png

• 考虑到跟别人的冲突概率大不大

• 真实开发中建一个文件夹, 导出

• props穿透

• attrs的使用

• 传入state作为props属性

  
  
  动态的设置css样式.png

• 两个比较高级的特性

• 1. 继承, 有一些样式可能是一样的, 可以使用继承, 看业务需求

     
     
     继承.png

• 2. 提供主题

     
     
     主题统一修改.png

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png