react杂记

React

webpack+react (hello world)

项目结构：
	src:
		app.js
		main.js
	package.json
	webpack_dev_config.js

需要安装包:
	yarn add react react-dom --save

---

app.js

import React, {component} from 'react';
class App extends Component {
    render(){
        return (
            <div>
                hello world
            </div>
        )
    }
}
export default App

注意：

return 最外一层的div不能破坏，内容全部写在div里面

浏览器不识别jsx，所以用babel来转换
见webpack_dev_config.js中的配置
网页地址：
	https://babeljs.cn/docs/setup/#installation

---

main.js(导入根组件，并渲染根组件)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(
    <App />, document.getElementById('root'));

注意：

如果App.js的导出是
	export App
则引入时应该是
	import {App} from 'xxxxx'

---

webpack_dev_config.js

配置babel:

https://babeljs.cn/
https://babeljs.cn/docs/setup/#installation //详情看这个

1.	安装包
	yarn add babel-loader babel-core --dev
	//转es6
	yarn add babel-preset-env --dev
	//转换jsx，并添加 "react" 到你的 .babelrc 的 presets 数组中。
	yarn add babel-preset-react --dev

开发阶段：

网址：

	https://github.com/jantimon/html-webpack-plugin

结合webpack-dev-server 配合 html-webpack-plugin

1.	安装包
	yarn add webpack html-webpack-plugin webpack-dev-server --dev

代码：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './template.html',
            filename: 'index.html'
        })
    ]
}

---

package.json

配置scripts

	"scripts": {
	    "dev": "webpack-dev-server --progress --open --config webpack_dev_config.js --prot 6008"
	}

---

.babelrc

{
    "presets": [
        "env",
        "react"
    ]
}

---

脚手架

参考地址：
	https://doc.react-china.org/docs/installation.html

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

---

热更新（非脚手架项目）

参考地址：
	https://github.com/gaearon/react-hot-loader
1.
	yarn add react-hot-loader --dev
	yarn add babel-polyfill --dev

2.
	// .babelrc
	{
	  "presets": [
	        ["env",
	        {
	            "modules": false
	        }],
	        "react"
	    ],
	  "plugins": ["react-hot-loader/babel"]
	}

3.
	https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

4.
	// webpack.config.js
	module.exports = {
	  entry: ['babel-polyfill', 'react-hot-loader/patch', './main.js'],
	}
	Note: Make sure to set the output.publicPath property to "/" as well. Otherwise hot reloading won't work as expected for nested routes.

5.
	// main.js
	import React from 'react'
	import ReactDOM from 'react-dom'
	import { AppContainer } from 'react-hot-loader'
	import App from './containers/App'

	const render = Component => {
	  ReactDOM.render(
	    <AppContainer>
	      <Component />
	    </AppContainer>,
	    document.getElementById('root'),
	  )
	}

	render(App)

	// Webpack Hot Module Replacement API
	if (module.hot) {
	  module.hot.accept('./containers/App', () => {
	    render(App)
	  })
	}

	Note: To make this work, you'll need to opt out of Babel transpiling ES2015 modules by changing the Babel ES2015 preset to be ["es2015", { "modules": false }]

6.
	"scripts": {
	    "dev": "webpack-dev-server --progress --open --config webpack_config_dev.js --port 6008 --hotOnly"
	}

热更新（脚手架生成的项目）

只需要在根目录下运行npm run eject，目录结构会改变

https://github.com/gaearon/react-hot-loader

Migrating from create-react-app里面跟着做三步

---

React对css、less、sass处理

1.	直接在标签里通过style写
	1.	<div style={{color:'red'}}>
            hello world123
        </div>
		<span style={{ fontSize : 16 + "px"}}>Hello, yoona</span>;
	2.	放在单独的对象中
		const style = {
		    color: 'green'
		}
        <div style={style}>
            hello world
        </div>		

2.	通过外部样式来写
	import	'xxxx.css/xxx.less/xxx.sass'
	//需要安装loader
	// style-loader css-loader less-loader sass-loader node-sass(这个用cnpm装)
	//yarn add style-loader css-loader --dev

	<div className="xxxx">
            hello world123
    </div>

注意：
	在jsx中，属性名称后面的值，两种情况，一种字符串，一种{}

---

组件-----有状态组件，无状态组件

组件的数据来源于两部分
	1.	父组件
	2.	自己内部数据

无状态组件：
	自己内部没有数据，数据来源于父组件

有状态组件：
	即可有父组件数据，也可以有自己内部数据

无状态组件

语法：

	import React from 'react'
	function Hello (){
	    return (
	        <div>123</div>
	    )
	}
	export default Hello

传值：

	传值方：
		通过属性名称=值的方式传递
		<Hello name="abc" age={10}></Hello>

	接收方：
		function Hello (props){
		    return (
		        <div>123,{props.name}</div>
		    )
		}

注意：
	父组件传过来的值只能展示，不能直接修改

有状态组件

语法：

	class Welcome extends React.Component {
	  render() {
	    return <h1>Hello, {this.props.name}</h1>;
	  }
	}

传值：

	传值方：
		通过属性名称=值的方式传递
		<Hello name="abc" age={10}></Hello>

	接收方：
		通过{this.props.name}

私有的值：
	constructor(){
        super()
        this.state = {
            name: 'tom'
        }
    }
	使用: {this.state.name}	

默认值（es7）：
	包：babel-preset-stage-0
	.babelrc中添加"stage-0"

	static defaultProps = {
		initCount: 300
	}

调用函数

<button onClick={()=>{this.clickme()}}>点我</button>

clickme(){
    console.log(1)
}

<button onClick={this.clickme()}>点我</button>
这种绑定是拿不到this的

改变内部数据

this.setStatus({
	name: "yoona"
})

---

prop-types检查类型 15.0+之后

import PropTypes from 'prop-types'

static propTypes = {
	initCount: PropTypes.number/string
}

生命周期

componentWillMount(){}
render(){}
componentDidMount(){}
componentWillReceiveProps(){}
shouldComponentUpdate(){
	return true
}
componentWillUpdate(){}
componentDidUpdate(){}

集成 Ant-Design

参考地址：
	https://ant.design/docs/react/introduce-cn

1.	安装
	yarn add antd

2.	import { DatePicker } from 'antd'; 

3.	import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

按需导入：
	1.	// .babelrc or babel-loader option
		{
		  "plugins": [
		    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
		  ]
		}
		然后只需从 antd 引入模块即可，无需单独引入样式

		参考地址：https://github.com/ant-design/babel-plugin-import

	2.	手动按需导入
		import DatePicker from 'antd/lib/date-picker';
	  	// 加载 JS
		import 'antd/lib/date-picker/style/css';
		// 加载 CSS

react-router-dom

参考地址：
	https://reacttraining.com/react-router/web/example/basic

yarn add react-router-dom --save

fetch-jsonp

yarn add fetch-jsonp --save

import fetchJsonp from 'fetch-jsonp'

getFilmList(){
     const url =  `https://api.douban.com/v2/movie/${this.state.filmType}`
     fetchJsonp(url).then(response=>response.json()).then(data=>{
         this.setState({
             isLoading: false,
             filmList: data.subjects
         })
     }).catch(e=> console.log('error',e))
}

改变数据时：

componentWillReceiveProps(props){
    this.setState({
        filmType: props.match.params.filmTypes,
        isLoading: true
    },()=>{
        this.getFilmList()
    })
}

render里面需要遍历时用{}

render() {
    if(this.state.isLoading){
        return <Spin tip="加载中...">
            <Alert
            message="正在加载中"
            description="哥正在拼命加载中，请稍后"
            type="info"
            />
        </Spin>
    }else{
        return (
            <div style={{display:'flex',flexWrap:'wrap',textAlign:'center'}}>
            {
                this.state.filmList.map((item,i)=>{
                    return <div key={i} onClick={()=>{this.goMovieDetail(item.id)}} className="movieItem" style={everyMovieItemStyle}>
                        <img style={{height:378}} src={item.images.small} alt=""/>
                        <p><strong>{item.title}</strong></p>
                        <p><strong>电影类型:{item.genres.join(',')}</strong></p>
                        <p><strong>上映年份:{item.year}</strong></p>
                        <div>评分:<Rate disabled defaultValue={item.rating.average / 2} /></div>
                    </div>
                })
            }
        </div>
        )
    }
}

改变导航

//通过编程式导航跳转到电影详情组件中去
goMovieDetail(movieId){
    this.props.history.push(`/movie/detail/${movieId}`)
}

//返回到上一级
goBack() {
    this.props.history.goBack()
}

webpack打包

参考地址（性能优化）：
	https://doc.react-china.org/docs/optimizing-performance.html

webpack指南里面：
	https://doc.webpack-china.org/guides/production/

1.	新建一个配置文件webpack_config_prod.js
2.	热重载要干掉
3.	压缩js
	new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            comments: false
    })
4.	压缩html
	参考网址：
		https://github.com/jantimon/html-webpack-plugin
		https://github.com/kangax/html-minifier#options-quick-reference

	new HtmlWebpackPlugin({
        template: './template.html',
        filename: 'index.html',
        minify: {
            collapseWhitespace: true,
            removeComments: true,
            minifyCSS: true,
            minifyJS: true
        }
    })

5.	output

		const path = require('path');
	    output: {
	        path:path.resolve(__dirname, "dist"),
			filename: "bundle.js"
	    }

6.	清除原先的dist
	const CleanWebpackPlugin = require('clean-webpack-plugin');
	new CleanWebpackPlugin(['dist'])

7.	配置package.json
	"build": "webpack --progress --config webpack_config_prod.js"

优化打包：

	抽离第三方包

	1.	抽离图片
		{
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 4000,//大于4kb就抽离出去
                        name:"images/[name]-[hash:5].[ext]"
                    }
                }
            ]
        }

	2.	明确第三方库
		https://doc.webpack-china.org/plugins/commons-chunk-plugin/

		entry: {
	        quanjiatong:['react','react-dom','react-router-dom'],
	        fetchJsonp:['fetch-jsonp'],
	        bundle:'./src/main.js'
	    }
		output: {
	        path:path.resolve(__dirname, "dist"),
	        filename: "js/[name].js"
	    }
		new webpack.optimize.CommonsChunkPlugin({
	            name: ['quanjiatong','fetchJsonp'],
	            minChunks: Infinity,
	    })

	3.	抽离对三方样式
		https://github.com/webpack-contrib/extract-text-webpack-plugin

		yarn add extract-text-webpack-plugin --dev

		//抽离第三方样式的包
		const ExtractTextPlugin = require("extract-text-webpack-plugin");

		{
	        test: /\.css$/,
	        use: ExtractTextPlugin.extract({
	          fallback: "style-loader",
	          use: [
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true //压缩css
                        }
                    }
                ]
	        })
	      }

		new ExtractTextPlugin("styles.css"),

服务器反向代理

以后补充