React简书开发实战课程笔记——4

foolsss

4年前

一、styled-components 扩展

在React中，一个文件中引入css样式表后，其他所有js文件中都可以使用这个样式表，也就是说css样式表是全局的，这样可能会造成样式冲突，所以借助第三方模块：styled-components，可以让css样式表只对指定的组件起作用。

安装：npm install styled-components --save
使用：

这个扩展不是把样式写在css文件中，而是写在js文件中（有点奇葩啊）。

新建一个js文件用于写样式（后面就叫这个js文件为样式文件）。

由于有的css样式还是需要公用的，比如reset.css样式表，所以下面先介绍下怎么公用样式：

import {  injectGlobal } from 'styled-components';  //injectGlobal 是styled-components的一个API

//将css代码写在injectGlobal后面的反引号里，就可以公用这些css代码
injectGlobal` body { margin: 0; padding: 10px; font-family: sans-serif; } `

其他需要对单个组件生效的css代码需要这样写：

样式文件：
```
const HeaderWrapper = styled.div` color: red; `;
const Logo = styled.a` width: 100px; `;
```
其实就是将html标签和css样式定义为一个组件，然后再使用这个组件。最终还是会被浏览器解析成真正的html标签

组件文件：
```
render () { 
  return (
    <HeaderWrapper>
      <Logo></Logo>
    </HeaderWrapper>
  )
}
```

在这个里面你可以使用scss的语法，比如：

const Logo = styled.input` border: 1px solid #000; &.focused { border: 1px solid blue; } &:placeholder { color: #999; } `;

如果要使用属性，比如：a标签的href属性，有两种写法：

const Logo = styled.a` color: #000; `;
render () { 
  return (
    <Logo href="#"></Logo>  //和正常的html标签用法一样
  )
}

const Logo = styled.a.attrs({   //将属性写成对象的形式
  href: '#',
})` color: #000; `;

如果要用css添加图片，比如：background: url('./logo.png');，这种传统的写法就不行了。需要另一种写法：

import logoImg from './logo.png';  //需要先将图片文件引入

const Logo = styled.a` width: 100px; background: url(${ logoImg}); `;

二、拆分reducer.js

如果只有一个reducer的话，随着业务逻辑的增加，代码会变的愈来愈多，reducer会变得越来越大，所以最好将其拆分成不同的块，每个块对应一个reducer.js文件。

比如： 网页头部的state拆分到headerReducer.js中。

下面是如何将所有的reducer文件连接起来：

import {  combineReducers } from 'redux';  //combineReducers是redux中的一个API，用于连接多个reducer
import headerReducer from './headerReducer.js';  //引入拆分出去的reducer
import footerReducer from './footerReducer.js';

const reducer =  combineReducers({ 
  header: headerReducer,
  footer: footerReducer 
});

export default reducer;

拆分之后再使用state中的数据就不能直接：this.state了，需要这样写：this.state.header.xxx，即需要指明: 是state下哪个块的数据。

三、immutable

用于将对象设置为不可更改。
可用于保护state，state是不允许修改的，为了防止误修改，可以借助immutable库

安装：npm install immutable
使用：

在用到state的文件里加上这句话：
```
import {  fromJS } from 'immutable';
```
然后：
```
const defaultStore = fromJS({   //immutable中的fromJS方法将state数据保护起来
  value: ''
});
```
之后如果要使用或者更改（注意：这里说的更改并不是真正的修改）state就要使用immutable提供的set和get方法:
```
this.state.set('value', 'hello');

console.log(this.state.get('value'););

//如果要同时更改多个state，有两种方法：
//1、
this.state.set().set().set()...

//2、
this.state.merge({ 
  value: 'hello',
  list: ["hello", "world"]
});
```
这里说明一下为什么用immutable设置state为不可修改之后还能更改state。

set的原理是这样的： 根据以前的state和传入的数据，返回一个新的state。这样修改state的目的实现了，但实际state并没有修改。所以，使用immutable不仅保护了state，而且又可以愉快的修改了~

四、redux-immutable

安装：npm install redux-immutable

使用：

将
import {  combineReducers } from 'redux';
改为：
import {  combineReducers } from 'redux-immutable';

//如果要get有子目录的state，比如：state.header.value //state下的header下的value
//使用redux-immutable之后，就不能再向immutable那样使用了（this.state.header.get('value')）
//必须给header也要加上get方法：
this.state.get('header').get('value');

//可以简写成：
this.state.getIn(['header', 'value']);  //注意书写顺序

五、react-router

作用就是根据不同的url，显示不同的页面信息

安装：npm install react-router-dom
使用：

import {  BrowserRouter, Route } from 'react-router-dom';

<BrowserRouter>
  <div>  //BrowserRouter中只能有一个元素，所以包裹一个div
    <Route path='/' exact component={ Home}></Route>
    <Route path='/detail' exact component={ Detail}></Route>
  </div>
</BrowserRouter>

说一下其中的exact，作用是让路径完全匹配，否则，当访问/detail目录时，同时也会访问到根目录/

有错误或不足，欢迎评论指正~

待续…