抹桥的博客

React 单页面初始化渲染优化

Create at 2017 04 20 • 4 min read • 技术 • React react-router Redux

由于项目使用 React, React-Router, Redux 来开发项目，采取了前端渲染的方式（如果采用 ssr 就不会有这个问题）。

问题

所以每到一个页面，需要发一个初始化的请求来获取页面数据，然后重新渲染页面，所以之前一个页面从请求到加载完毕的流程是这样的：

Route match -> ComponentWillMount ->  render -> ComponentDidMount -> dispatch(init())->  render -> componentDidUpdate

首先是路由匹配，然后准备加载组件，使用通过 Reducer 里面的初始化 state 进行 render, 然后触发 ComponentDidMount 事件，在这个事件里面去 dispatch 一个执行页面初始化的请求的 Action

Read more

`一个 React Form 组件的重构思路`

Create at 2017 03 18 • 13 min read • 技术 • ReactForm

最近对团队内部 React 组件库（ne-rc）中的 Form 组件进行了重构，记录一下思考的过程。


一些前置定义：
| 名词 | 定义 |
| ------ | ------------------------------------------------- |
| 表单 | Form 组件 |
| 子表单 | 嵌套在 Form 下面的类似 Input, Select 这样的子组件 |
首先我们看一下，我们的对 Form 组件的需求是什么。

获取当前变动表单的状态

校验所有必填表单是否填写完成
对外触发具体表单变化的方法 formField

Read more

`react-v2ex`

Create at 2015 12 26 • 5 min read • 技术 • JavaScriptReact

为了练手，用 react 写了个 v2ex 的首页：页面地址项目地址


整个项目基础 react 搭建，样式本来打算用 inlineStyle 来写的，但是发现写起来太累，于是还是用回到 sass，最后用 webpack 来编译。本来想着看能不能直接调用 V 站的 API 来做一个纯前端的首页，所有的数据都用 ajax 来调，但是发现因为跨域的问题，前端无法拿到数据，也就放弃了，最终也只能是一个静态页面。
说一下写代码中遇到的一些问题吧，首先整个项目的文件结构如下：
│  .babelrc
│  .editorconfig
│  .eslintrc
│  .gitignore
│  index.html
│  index.js
│  package.js

Read more

`初试 react-router`

Create at 2015 10 09 • 5 min read • 技术 • JavaScriptReactreact-router

react-router 提供简单有强大 API 来方便我们在React搭建的单页面中实现路由功能。首先看一个简单的例子：


import React from "react"
import { findDOMNode, render } from "react-dom"
import { Link, Route, Router } from "react-router"

let Page1 = React.createClass({
  render() {
    return (
      <div>
        <h1>Page1</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Ab accusantium animi dicta dignissimos earum eos esse impedit ipsum iste

Read more