React初探

父组件传给子组件：

//父
<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()