父組件傳給子組件：
//父
<father name={'hanliu'} age={18}/>
//子
<child> { this.props.name }{ this.props.age } <child/>
父組件直接傳給孫子組件：父->子->孫
//需要在中間組件（即子組件）引用的孫子組件上加{...this.props}
//如有其他額外參數(shù)->加{...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})
}
組件傳參時對參數(shù)的驗證規(guī)則（prop驗證）
//必傳參數(shù)age，number類型
BodyIndex.propTypes = {
age: React.propTypes.number.isRequired
}
//非必傳參數(shù)name，不傳顯示默認的，傳了就被參數(shù)覆蓋
const defaultProps = {
name: '這是一個默認名稱'
}
BodyIndex.defaultProps = defaultProps；
React獲取Dom節(jié)點
refs會自動銷毀對子組件的引用，不要在render或render之前對refs進行調用
//第一種不推薦
ReactDom.findDOMNode(document.getElementById('')).style.color = 'red'
//第二種推薦
//首先在html節(jié)點上加上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)
定義樣式：（內聯(lián)樣式必須在render函數(shù)里，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 還提供兩種特殊狀態(tài)的處理函數(shù)。
componentWillReceiveProps(object nextProps)：
已加載組件收到新的參數(shù)時調用
shouldComponentUpdate(object nextProps, object nextState)：
組件判斷是否重新渲染時調用
Ajax：（fetch）
安裝：
npm install fetch --save
使用方法：
fetch ("url", Method)
.then(response => response.json())
.then(json => {
//接口請求成功
})
.catch()
