标签归档：React

c君不在

2018/10/07

React 的行内条件渲染（inline conditional rendering）能够在无 else 分支的情况下简化条件渲染，这是由子元素定义及渲染决定的。

const ele = (
  <div>
    <p>{true}</p>
    <p>{true && 1}</p>

    <p>{false}</p>
    <p>{false && 2}</p>
  </div>
);

对应的 JavaScript 代码是

const ele = React.createElement(
  "div",
  null,
  React.createElement("p", null, true),
  React.createElement("p", null, true && 1),
  React.createElement("p", null, false),
  React.createElement("p", null, false && 2)
);

把 true && 1 等的表达式结果作为子元素去渲染时，使用  ChildReconciler#createChild ，其中仅当子元素类型（typeof）是 string、number、object 且不为 null 时才渲染，所以 true / false 则不会渲染。

继续阅读 →

单 Store 单页应用的状态重置

如果是基于 Redux 等单 Store 形式来构建单页应用，那么需要注意，大多数时候，切换页面时（如前进、后退或直接访问），需要注意状态的重置。

如果用的是 react-router-redux，那么需要在切换后做 reset 的页面的 reducer 中，在 action 是 LOCATION_CHANGE1 时，返回该 reducer 的 initState。如：

// reducers/page1.js
import { LOCATION_CHANGE } from 'react-router-redux';
import * as actions from '../../actions/page1';

const initialState = {
  list: ['默认文本'],
};

export default function index(state = initialState, action) {
  switch (action.type) {
    case LOCATION_CHANGE:
      return initialState;

    case actions.ADD_TEXT:

      return Object.assign({}, state, {
        list: [action.data, ...state.list],
      });

    default:
      return state;
  }
}

如果用的是 connected-react-router，也类似。

// reducers/counter.js
import { LOCATION_CHANGE } from 'connected-react-router';

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case LOCATION_CHANGE:
      return 0;
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

export default counterReducer

继续阅读 →