react基础（jsx，组件，react-dom，react-router-dom，red ux，脚手架安装+新旧生命周期+通信...）

概念：

          react官网: https://reactjs.org/

React UI组件库:  

           material-ui(国外):官网: http://www.material-ui.com/#/

  ant-design(国内蚂蚁金服):官网: https://ant.design/index-cn

 react 是目前最流行的框架;其中是采用 mvvm 的思想，让我们把所有的只关注视图层和逻辑层

 react 的创始人：Facebook； js 的创始人：布兰登 艾奇；

 react由： (jsx，组件，react-dom)，和他的全家桶技术（react-router-dom，redux）

         jsx：用于将jsx转化js语法      react-router-dom：路由

          react-dom：虚拟dom            redux：管理数据,相当于vue中的vuex

prop-types：我们想要对语法进行验证，及限制数据类型和默认值
            static defaultProps={ //设置props默认值
               title:'hello word'
              }
            static propTypes={ //设置props的数据类型
                  title:PropTypes.string.isRequired
              }

react-router-dom：react 中实现路由跳转的插件

redux：用于组件之间进行通信，但是我们写中大型项目的话，无疑是最好的选择，小项目的话，可以不考虑

基础使用：

 

       三部分:1.导入三个包, 2.准备盒子 ，3.在babel中操作数据 

   需要引入三个文件：react.development.js，react-dom.development.js，babel.min.js，

  react.development.js：react核心库   

  react-dom.development.js：扩展库用于支持操作dom

  babel.min.js: 用于将jsx转化js语法

react脚手架安装 :

    1. 全局安装： npm i create-react-app -g

    2. 新建目录： create-react-app   mypro(项目名)

    3.进入目录：  cd mpro(项目名)

    4.运行：         npm start

事件的 处理写法：

 ref 的使用（获取元素节点）

 

for 循环，及 if 条件判断

 

新旧生命周期对比：

 旧的生命周期：

 

1. 组件的三个生命周期状态:
	Mount：插入真实 DOM
	Update：被重新渲染
	Unmount：被移出真实 DOM
2. 生命周期流程:
	* 第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)
		constructor()
		componentWillMount() : 将要插入回调
		render() : 用于插入虚拟DOM回调
		componentDidMount() : 已经插入回调
	* 每次更新state: this.setState({})
	    componentWillReceiveProps(): 接收父组件新的属性
	    componentWillUpdate() : 将要更新回调
	    render() : 更新(重新渲染)
	    componentDidUpdate() : 已经更新回调
	* 删除组件: ReactDOM.unmountComponentAtNode(div): 移除组件
		componentWillUnmount() : 组件将要被移除回调
3. 常用的方法
	render(): 必须重写, 返回一个自定义的虚拟DOM
  	constructor(): 初始化状态, 绑定this(可以箭头函数代替)
  	componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听

新生命周期：

 

          //卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}
			
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件更新完毕的钩子
		componentDidUpdate(preProps,preState,snapshotValue){
			console.log('Count---  componentDidUpdate',preProps,preState,snapshotValue);
                  
			}

react通信

      在父组件中的子组件标签上绑定属性: <Child name={this.state.name}

      在子组件中通过props接收： this.props.name