react新安装--fastclick、react-fastclick、react-hot-loader、react-redux、prop-types

React -fastclick与fastclick的使用

目的：为解决移动端 click事件的 300ms 延时

npm install react-fastclick --save

其中：

import initReactFastclick from 'react-fastclick';
initReactFastclick();

就这样使用即可，不需要在添加任何监听事件，使用react-fastclick,也会使input的focus事件响应更快

原文来在：https://www.npmjs.com/package/react-fastclick

npm install fastclick --save

其中：

import FastClick from 'fastclick';

//为解决移动端 click事件的 300ms 延时
FastClick.attach(document.body);

fastclick解决延迟点击来:http://blog.csdn.net/u011413061/article/details/50076523

 

webpack配置react-hot-loader热加载局部新

webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面

而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件

下面来说说怎么来配置 react-hot-loader 。

步骤1：

           安装 react-hot-loader 

npm install --save-dev react-hot-loader

最后这个操作就是在页面的主入口，比如我的是 main.js 添加些代码

import React from 'react';  
import ReactDOM from 'react-dom';  
import Greeter from './greeter';  
import "./main.css";  
import { AppContainer } from 'react-hot-loader'; //设置这里  
  
const render = (App) => {  
    ReactDOM.render(  
        <AppContainer>  
            <App />  
        </AppContainer>,  
    document.getElementById('root')  
    )  
}  
  
render(Greeter)  
  
// Hot Module Replacement API   
if (module.hot) {  
    module.hot.accept('./greeter', () => {  
        render(require('./greeter').default)  
    })  
}  

原文说明：http://blog.csdn.net/huangpb123/article/details/78556652

 

React-Redux 的用法

React-Redux 提供Provider组件，可以让容器组件拿到state。

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

原文Provider组件说明：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

 

利用prop-types第三方库对组件的props中的变量进行类型检测

为此引入React.propTypes：React.PropTypes 提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。

注意为了性能考虑，只在开发环境验证 propTypes。

npm install prop-types --save

import PropTypes from 'prop-types';
export default class PublicHeader extends Component{  
   static  propTypes:={
        name: PropTypes.array.isRequired,
        student: PropTypes.bool.isRequired,
        sayHello: PropTypes.func.isRequired,
        age: PropTypes.number.isRequired,
        family:PropTypes.object.isRequired,
        namer:PropTypes.string.isRequired,
        namef: PropTypes.symbol.isRequired,
        children: PropTypes.node.isRequired     
    }
    render: function() {  
        return (    
            <div>{this.props.student ? "Hello, react!" : "Sorry!"}</div>    
        );    
    }    
}   
ReactDOM.render(    
    <MyBox student={true}  />,    
    document.getElementById('timeBox')    
);  

1、声明props为必须的某类型

React.PropTypes.*.isRequired

2、声明props为必须的任意类型

React.PropTypes.any.isRequired

 浅谈React的类型检测——PropTypes：http://blog.csdn.net/zhouziyu2011/article/details/70842310

其中Prop 验证

static propTypes = {
    optData: PropTypes.objectOf(PropTypes.any),
    defaultData: PropTypes.objectOf(PropTypes.any),

      inputList: PropTypes.arrayOf(PropTypes.any),

    onChange: PropTypes.func,
    onColumnChange: PropTypes.func,
  };

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本类型。默认
    // 情况下，这些 prop 都是可传可不传的。
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象：数字，
    // 字符串，DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

默认 Prop 值

React 支持以声明式的方式来定义 props 的默认值。

var ComponentWithDefaultProps = React.createClass({
  getDefaultProps: function() {
    return {
      value: 'default value'
    };
  }
  /* ... */
});

当父级没有传入 props 时，getDefaultProps() 可以保证 this.props.value 有默认值，注意 getDefaultProps 的结果会被 缓存。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。

单个子级

React.PropTypes.element 可以限定只能有一个子级传入。

var MyComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  render: function() {
    return (
      <div>
        {this.props.children} // 有且仅有一个元素，否则会抛异常。
      </div>
    );
  }

});

React组件属性类型(propTypes)：http://blog.csdn.net/u013224660/article/details/51163067