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版本的關(guān)系蔗崎，你需要還需要安裝 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",
}
然后在項目根目錄創(chuàng)建一個 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;
}
重啟開發(fā)服務(wù)器后邓深，就可以使用@來表示'src'的絕對路徑了
5驗證 propTypes
yarn add prop-types
- 第一個方法：defaultProps
給對象設(shè)置默認屬性未桥，如果傳來的對象沒有對應(yīng)值，則把這里的屬性賦值給該對象芥备。 - 第二個方法：propTypes
設(shè)置props的類型冬耿，如上：name規(guī)定為string類型，isRequeired是說明該值不能為空萌壳，必須傳遞 - 注意為了性能考慮亦镶，只在開發(fā)環(huán)境驗證 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：組件內(nèi)部可變狀態(tài)數(shù)據(jù)
- props：組件外部數(shù)據(jù)
- refs：標識組件某個元素，不要過度使用
<input type="text" ref={node=>this.inputa=node}/>
ref=回調(diào)函數(shù)袱瓮，第一次渲染是執(zhí)行缤骨，node是當前的dom元素，函數(shù)體里面將node保存到組件對象this上尺借。通過this.inputa.value取值绊起。
其他
- todo list
unshift() - style={{width: 10}},外側(cè){}表示里面是js代碼，內(nèi)存{}表示里面是js對象
7. form
- 受控組件： 表單輸入數(shù)據(jù)自動收集到狀態(tài)燎斩，提交時直接讀狀態(tài)虱歪，寫法復(fù)雜蜂绎；但操作狀態(tài)符合react思想，官方推薦
<input type="text" value={this.state.val} onChange={this.handleChange}/>
- 非受控組件： 需要提交時才讀取輸入框中的數(shù)據(jù)实蔽，寫法簡單,但操作原生dom不符合react思想
submit=()=>{ const name=this.inputa.value}
<input type="text" ref={node=>this.inputa=node}/>
項目中均可使用荡碾，無效率差別。
8. 組件生命周期
- render
- componentDidMount: 初始化異步操作局装，開啟監(jiān)聽坛吁，發(fā)送ajax請求
- componentWillUnmount：收尾工作，eg.清理定時器
componentDidMount() {
this.intervalId = setInterval(function() {
console.log("定時器執(zhí)行...");
}, 200);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
- 定時器需放到當前組件對象this里面铐尚，才能在不同作用域調(diào)用到
參考使用React構(gòu)建精簡版本掘金（一）
