react-router下,基于Switch,可以实现针对未匹配的路由调用指定的component来展现

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

现在的需求是:在发现有未匹配的路由时,自动跳转到首页

如果把上面的代码改成:

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={Home}/>
</Switch>

这个可以实现的时,未匹配的路由展现首页的内容,可是当前的url还是那个未被匹配的路由。这样的显示就会有点怪异。

针对这个问题,可以使用react-router里面的另外一个组件Redirect

基于Redirect新建如下组件:

const RouteFallback = (props) => {
    console.log('route fallback with location: ', props.location);
    return <Redirect to={{
        pathname: '/',
        from: props.location
    }} />
}

再重新调整Switch:

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={RouteFallback}/>
</Switch>

这样就能实现针对非法路径的自动跳转首页的功能了

最近在尝试使用styled-components来做React下的样式开发,这样可以利用js语言的灵活来增强css的能力。

在多屏适配这块,一直是在使用淘宝的lib-flexible

在用styled-components处理px到rem的转换时,有点问题了。styled-components自己本着基础库的原则,是没有附加这些复杂的配置,所以一开始想的是自己写一个函数来做单位换算:

function r(pxValue) {
    const ratio = 20; // 根据项目配置比例的方式自行设定
    pxValue = parseInt(pxValue);

    return pxValue / ratio + 'rem';
}

然后在写样式的时候这样写

// 保留了px的单位而不是传递数字,使得代码具有可读性,方便维护
let AvatarImage = styled(Image)`
    width: ${r('132px')}; 
    height: ${r('132px')};
`;

这样满足了基本需求。

不过作为喜欢偷懒喜欢折腾的程序员,总觉得这样写很啰嗦,所以想着能不能也跟styled-components那样使用标签模版的功能

所以也就有了第二版的function r:

function r(pxValue) {
    const ratio = 20; // 根据项目配置比例的方式自行设定

    // 针对template literals
    if (Array.isArray(pxValue)) {
        pxValue = pxValue[0];
    }

    pxValue = parseInt(pxValue);

    return pxValue / ratio + 'rem';
}

在样式书写上,就可以这样写了:

let AvatarImage = styled(Image)`
    width: ${r`132px`};
    height: ${r`132px`};
`;

少写了两个括号,看着也清晰多了。

不过还是不太满意,因为样式里面如果数值一多,写起来还是有点费事。

既然能够实现单个单位的换算,那用正则表达式匹配所有样式字符串里面的px值,再替换为rem值,再把计算的结果返回给styled-components不就可以了。

想法是好的,不过在读取解析已有的样式模版字符串,正则匹配,还有如何把结果传递给styled-components这些方面,坑还是很多的,折腾了一个多小时,也总算解决了。

这里面,最核心的解析已有的样式模版字符串,styled-components提供了一个helper: css,使得工作量大大减少。

function r(pxValue) {
    const ratio = 20; // 根据项目配置比例的方式自行设定

    // 针对template literals
    if (Array.isArray(pxValue)) {
        pxValue = pxValue[0];
    }

    pxValue = parseInt(pxValue);

    return pxValue / ratio + 'rem';
}

// 把字符串样式里面的px单位换算成rem的
// 支持多行匹配
function transformPxToRem(style) {
    // 避免处理了函数等情况
    if (typeof style !== 'string') {
        return style;
    }

    return style.replace(/\d+px/gm, matched => {
        return r(matched);
    });
}

// 实现在把样式传递给styled之前,预先用transformPxToRem处理
function t(strings, ...interpolations) {
    let styles = css(strings, ...interpolations); // css是styled-components的一个helper
    styles = styles.map(transformPxToRem);

    // 模拟raw的调用
    return [[""], styles]
};

基于以上代码,在最终书写样式的时候就可以这样:

let AvatarImage = styled(Image)(...t`
    width: 132px;
    height: 132px;
`);

以函数的形式调用styled-compoent,而不是标签模版的形式,同时解构t函数的返回值,这样的结果和styled-components直接计算标签模版是一样的。

不过在实现这个功能之后,在写这篇文章的时候,发现lib-flexible不再用rem作为多端适配的方案了,而是改用的vm

不过最核心的预处理部分已经实现了,后面的调整还是很容易做的。

后期的计划:

现在css helper返回的是一个数组,可以考虑join成字符串,去掉多余的空白符,然后实现css to object和object to css。然后再加上plugin机制,使得整个系统更加灵活多变。

说着说着,好像实现了一个简版的postCss。

现在styled-components是有增加babel plugin的计划来打通postCss和styled-compoent,期待。

这份读书笔记是看了阮一峰的《React 入门实例教程》之后撰写的,留作记录。需要看原文的可以点击前面的书名访问对应链接。

这篇文章的目的

  • 介绍react
  • 如何下载react
  • 如何安装react
  • 如何使用react

文章的组织架构

从易到难的开始介绍。

react在页面的部署

  1. 依赖的两个js
  2. jsx 模板的标签规范
  3. 模板的编译应该放到服务器完成

模板语法

  1. React.render() 转换模板为HTML并插入节点
  2. 允许HTML和javascript混写。
    1. 规则是:遇到HTML标签(以<开头)则视为HTML,遇到代码块(以{)开头,视为javascript
    2. HTML内容可以直接写在javascript变量里
    3. javascript变量可以直接插入到模板。如果变量是数组,则自动展开这个数组的所有成员

组件

组件介绍

  1. 用React.createClass来生成组件类
  2. createClass的传参对象,需要一个render方法,用来描述组件的渲染
  3. 组件类以大驼峰方式书写
  4. 组件类以模板的方式调用,写法可以有单标签和双标签两种
  5. 组件类以模板的方式调用,实际是实例化了产生了一个对象,以下简称为组件
  6. 组件的调用和HTML标签完全一致,能加入属性。属性的调用,可以通过组件类的实例在javascript中,以this.props.xxx的方式调用
  7. 组件的style属性设定的时候,期望的值是一个对象{opacity: 0.5, marginLeft: ‘1px’} 而不是一个字符串,最终的写法是{{opacity: 0.5, marginLeft: ‘1px’}} 外面一对大括号表明是javascript代码块,里面的一对大括号,表明是对象
  8. 冲突的属性名class和for 要对应改为className和htmlFor,因为class和for是javascript的保留字
  9. this.props的属性和组件HTML属性一一对应,但是this.props.children例外,它表示组件的子节点
  10. 在用双标签的方式调用组件的时候,标签之间的HTML即为组件的子节点,完全和原生HTML一致

组件的特性

  1. findDOMNode
    1. virtual DOM
    2. virtual DOM 通过 DOM diff算法映射到真实DOM上
    3. findDOMNode用于获取跟组件关联的真实DOM的节点
    4. 只有在virtual DOM插入文档之后才能起作用
  2. this.state
    1. 类似状态机的概念
    2. getInitialState方法来设定初始状态
    3. 通过用户互动修改状态,一般是对应的event function来setState
    4. render里面,根据不同的状态渲染出不同的UI
    5. setState自动调用render重绘UI
    6. 区分this.props和this.state: this.props类似常量,设定之后不改变;this.state是随着用户互动而变化的特性
    7. 表单内容的变化也是通过state来进行更新的

组件生命周期

  1. 三个状态
    1. Mounting 已插入真实DOM
    2. Updating 正在被重新渲染
    3. Unmounting 已移出真实DOM
  2. 每个状态提供两个回调函数,will在进入状态之前调用,did在进入状态之后调用
  3. 三个状态共计五种回调函数,书写方式component是前缀,will/did是行为,Mount/Update/Unmount是状态
    1. componentWillMount()
    2. componentDidMount()
    3. componentWillUpdate(object nextProps, object nextState)
    4. componentDidUpdate(object prevProps, object prevState)
    5. componentWillUnmount()   为什么没有componentDidUnmount() ?
  4. 特殊状态的回调
    1. componentWillReceiveProps(object nextProps) 已加载组件收到新参数
    2. shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染时调用 不明白

结合其他库或者框架使用

  1. react没有任何依赖
  2. react只关注表现层
  3. 如果希望对组件的DOM进行操作,尽量在componentDidMount中进行,保证真实DOM已经存在

主旨

React是一个关注表现层,以组件来构建内容,以状态机来完成交互的UI改变的,可以在浏览器端和服务器端同时运行的前端框架。