react项目入门03

1. 脚手架安装[create-react-app]

脚手架特点：模块化，组件化，工程化（可通过命令编译）
(https://github.com/facebookincubator/create-react-app)

npm install -g create-react-app
create-react-app my-app

或者

yarn create react-app antd-demo

.gitignore
package.json 包描述文件
1.标识(name version) 2.依赖 3.运行script (npm run)

2.修改 webpack 的配置

引入 react-app-rewired 并修改 package.json 里的启动配置:

$ yarn add react-app-rewired

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x版本的关系，你需要还需要安装 customize-cra。(antd 3.16.2)

$ yarn add customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test --env=jsdom",
+   "start": "react-app-rewired start",
+   "build": "react-app-rewired build",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

3.antd-mobile按需加载

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import

// const { injectBabelPlugin } = require('react-app-rewired');
 // module.exports = function override(config, env) {
//config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
  //  return config;
  //};
     const { override, fixBabelImports } = require('customize-cra');
     module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd-mobile',
         libraryDirectory: 'es',
        style: 'css',
      }),
     );

更改引用方式

- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';

3.2.less配置

yarn add less less-loader

修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
    }),
);

使用

import "./index.less";
 <p className="name">{val.name}</p>

4.配置别名

const path = require('path');
function resolve(dir) { return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
    config.resolve.alias = { '@': resolve('src')
    } return config;
}

重启开发服务器后，就可以使用@来表示'src'的绝对路径了

5验证 propTypes

yarn add prop-types

第一个方法：defaultProps
给对象设置默认属性，如果传来的对象没有对应值，则把这里的属性赋值给该对象。
第二个方法：propTypes
设置props的类型，如上：name规定为string类型，isRequeired是说明该值不能为空，必须传递
注意为了性能考虑，只在开发环境验证 propTypes


import PropTypes from 'prop-types';
export default class Item extends React.PureComponent {

    static defaultProps = {
        name: 'item',
        age:18
    };

    static propTypes = {
        name:PropTypes.string.isRequired,
        age:PropTypes.number.isRequired,
    };

    render() {
        let {name,age} = this.props;
        return (
            <div>
                <div>name:{name} , </div>
                <div>age:{age}</div>
            </div>
        )
    }
}

6. 组件三大属性

state：组件内部可变状态数据
props：组件外部数据
refs：标识组件某个元素，不要过度使用

<input type="text" ref={node=>this.inputa=node}/>

ref=回调函数，第一次渲染是执行，node是当前的dom元素，函数体里面将node保存到组件对象this上。通过this.inputa.value取值。

其他

todo list
unshift()
style={{width: 10}},外侧{}表示里面是js代码，内存{}表示里面是js对象

7. form

受控组件：表单输入数据自动收集到状态，提交时直接读状态，写法复杂；但操作状态符合react思想，官方推荐

<input type="text" value={this.state.val} onChange={this.handleChange}/>

非受控组件：需要提交时才读取输入框中的数据，写法简单,但操作原生dom不符合react思想

submit=()=>{ const name=this.inputa.value}
<input type="text" ref={node=>this.inputa=node}/>

项目中均可使用，无效率差别。

8. 组件生命周期

render
componentDidMount: 初始化异步操作，开启监听，发送ajax请求
componentWillUnmount：收尾工作，eg.清理定时器

 componentDidMount() {
    this.intervalId = setInterval(function() {
      console.log("定时器执行...");
    }, 200);
  }
  componentWillUnmount() {
      clearInterval(this.intervalId);
  }

定时器需放到当前组件对象this里面，才能在不同作用域调用到

参考使用React构建精简版本掘金（一）