2018-08-04 汉得日记

React的继续学习

继续参考胡子的reactjs小书

**

高阶组件(High-Order Components)

高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。

const NewComponent = higherOrderComponent(OldComponent)

重要的事情再重复一次，高阶组件是一个函数（而不是组件），它接受一个组件作为参数，返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件

import React, { Component } from 'react'

export default (WrappedComponent) => {
class NewComponent extends Component {
    // 可以做很多自定义逻辑
    render () {
    return <WrappedComponent />
    }
}
return NewComponent
}

React里的context

React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的，你可以理解每个组件的 context 就是瀑布的源头，只能往下流不能往上飞。

class Index extends Component {
static childContextTypes = {
    themeColor: PropTypes.string
}

constructor () {
    super()
    this.state = { themeColor: 'red' }
}

getChildContext () {
    return { themeColor: this.state.themeColor }
}

render () {
    return (
    <div>
        <Header />
        <Main />
    </div>
    )
}
}

注意

因为 context 是一个危险的特性，按照 React.js 团队的想法就是，把危险的事情搞复杂一些，提高使用门槛人们就不会去用了。如果你要给组件设置 context，那么 childContextTypes 是必写的。

除非你觉得自己的 React.js 水平已经比较炉火纯青了，否则你永远不要使用 context

同理，子组件想要调用context，也是要设置childTypes.

Sass的相关学习

参考Sass中文网

由于在研究公司choerodon项目的过程中了解到了项目开发规范中的前端规范，里面明确提出了采用sass作为css预处理工具。而我对于sass也不是很熟，所以正好有空来学习一下。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1. 特色功能 (Features)

(1)完全兼容 CSS3

(2)在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能

(3)通过函数进行颜色值与属性值的运算

(4)提供控制指令 (control directives)等高级功能

(5)自定义输出格式

2.常用格式

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) 所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，。这种格式以 .scss 作为拓展名。

关于行内注释和块注释 :

//不会在编译后的css文件中出现，/**/会在编译后的css文件中出现

scss除了提供类的嵌套能力还提供了属性的嵌套

例如font-size可写为,注意冒号不能丢
font:
{
size:
}

本周总结

1.这一周主要学习了react的相关知识，包括react-router、mobx-react等等。其中也包括了自己在网站上的自学。其中对于Mobx还是有很多不熟的地方，应用的也不是很好需要继续巩固。

2.自己的心态方面，由于进度很快，2天一考，有些跟不上。所幸后面几天没有进行考试，让我有时间把之前的知识进行消化。下一周开始对于猪齿鱼前端的综合讲解。希望能够结合所学的知识进行理解。