父组件传给子组件：
//父
<father name={'hanliu'} age={18}/>
//子
<child> { this.props.name }{ this.props.age } <child/>
父组件直接传给孙子组件：父->子->孙
//需要在中间组件（即子组件）引用的孙子组件上加{...this.props}
//如有其他额外参数->加{...this.props} id={4}
<Bodychild {...this.props} id={4}/>
子组件传给父组件：
//子组件
<child onChange={this.props.handleChildValue}></child>
//父组件
<father handleChildValue={ this.handleFunction.bind(this) }/>
handleFunction(event){
this.setState({age: event.target.value})
}
组件传参时对参数的验证规则（prop验证）
//必传参数age，number类型
BodyIndex.propTypes = {
age: React.propTypes.number.isRequired
}
//非必传参数name，不传显示默认的，传了就被参数覆盖
const defaultProps = {
name: '这是一个默认名称'
}
BodyIndex.defaultProps = defaultProps；
React获取Dom节点
refs会自动销毁对子组件的引用，不要在render或render之前对refs进行调用
//第一种不推荐
ReactDom.findDOMNode(document.getElementById('')).style.color = 'red'
//第二种推荐
//首先在html节点上加上ref=“XX”
//获取用this.refs.XX.style.color = 'red'
独立组件之间共享Mixins（组件间事件的共享）
语法不支持ES6，因此需要安装插件（ npm install --save react-mixin@2 ）
所有组件公用的方法 写在 mixins.js文件里，然后在使用的文件中引用如下：
//引入安装的ReactMixin插件和自己写的，如 mixins.js文件。
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';
//和prop验证相似，代码如下：
ReactMixin(本组件名.prototype, MixinLog)
定义样式：（内联样式必须在render函数里，return同级。在return{}之前）
//样式内部可以使用三元表达式
paddingTop: （this.state.miniHeader) ? '3px' : '15px',
屏幕快照 2019-07-29 下午6.49.23.png
CSS模块化：
1、需要安装以下2个插件：style-loader css-loader
babel-plugin-react-html-attrs（非必要，使用这个插件，className能简写成calss）
2、webpack.config.js文件配置方法* （见第20行）
配置后，两个相同的类名会被编译成不同的类名，且互不影响，避免全局污染
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['react-html-attrs'], //添加组件的插件配置
}
},
//下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用(使得css模块化，同时引用互不影响)
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
]
},
output: {
path: __dirname,
filename: "./src/bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
导入css文件，定义成一个变量
import footerCss from './index.css'
var footerCss = require('./index.css')
<footer className={ footerCss.container }></footer>
如果想让样式适用于全局
:global(.btn){
color: red;
}
CSS代码转换成JSX工具：
https://staxmanade.com/CssToReact/
生命周期：
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
//Mounting：已插入真实 DOM
//Updating：正在被重新渲染
//Unmounting：已移出真实 DOM
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：
已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：
组件判断是否重新渲染时调用
Ajax：（fetch）
安装：
npm install fetch --save
使用方法：
fetch ("url", Method)
.then(response => response.json())
.then(json => {
//接口请求成功
})
.catch()
