react使用笔记及生命周期

react-intl：做国际化的

react只是dom的一个抽象层，并不是web应用的完整解决方案。它没涉及到代码结构和组件之间的通信

react components的生命周期，在浏览器中的三个状态：

　　Mounted（React.renderComponent()）:React components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。

　　update(setState(),setProps()):一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的dom一定会发生变化， react会把这个component的当前state和最近一次的state进行对比。只有当state确实发生了改变，并且影响到了dom结构的时候，react才会去更新dom。 

　　Unmounted: 一个mounted的react Components对应的DOM节点被从DOM结构中移除的这样一个过程。每一个状态react都封装了对应的hook（钩子）函数，在对特定的事件进行

1.原生HTMl元素名以小写字母开头，而自定义的React类名以大写字母开头，比如HelloMessage不能写成helloMessage.除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错

react主要是view层

数据单向绑定

2.虚拟DOM结构：

react很快，很轻。他之所以快就是因为它有一套虚拟DOM的存在，react内部还实现了一个低复杂度高效率的Diff算法，不同于以往框架。例如angular使用的脏检查。在应用的数据改变之后，react会尽力少的比较，然后根据虚拟DOM只改变真实DOM中需要被改变的部分。React也借此实现了它的高效率、高性能。这并不是虚拟DOM唯一的意义，比如react native的实现，可以让你只掌握js的知识也能在其他平台系统上开发应用，而不只是写网页。等等

　　实现方式：

　　　　

3.react生命周期

componentWillMount():只会在装载之前调用一次，在render之前调用，你可以在这个方法里面调用setState改变状态，并且不会导致额外调用一次render。componentWillMount(){//写自己的业务逻辑代码}

componentDidMount():只会在装载完成之后调用一次，在render之后调用，从这里开始可以通过ReactDOM.findDOMNode(this)获取到组件的DOM节点。用法同上

getDefaultProps，getInitialState：只会在装载之前调用一次

getInitialState():在组件的生命周期中仅执行一次，设置组件的初始化状态

更新组件触发（这些方法不会在首次render组件的周期调用）

 componentWillReceiveProps

 shouldComponentUpdate

 componentWillUpdate

 componentDidUpdate

卸载组件触发：componentWillUnmount

组件初始化：getDefaultProps——>getInitialState——>componentWillMount——>render——>componentDidMount

组件props更新：componentWillRecevieProps——>shouldComponentUpdate——>(如果返回true)componentWillUpdate——>render——>compongentDidUpdate

组件卸载：componentWillUnmount

4.react属性与事件

　　state属性：state对模块来说是自身的属性。state对当前组件做了更新之后会立马反应virtual dom，virtual dom再反应到DOM。过程是自动的。state属性的作用域只在当前的class中。更新时只更新需更新的内容，不会整个界面更新

export default class jsx extends React.Component{
  constructor(){//类的初始化构造函数
    super(); //调用基类的所有的初始化方法
    this.state={name:'hhm'} //初始化赋值
  }
  render(){
    this.setState({name:'hah'}) //更改state值
   return(
     <p>{this.state.name}/p>
   )
  }
}

　　

5. props属性

　　props和state一样同属于component,prop对模块来说是外来的属性

6.父向子传：

　　定义：<myFooter myprops={'hhm'}/>  //父

　　接收：<p>{this.props.myprops}</p>　　//子

7.子向父传（必须是函数）：

//父组件

　　

handleChildValueChange(event){

　　　　this.setState({name:event.target.value});

　　}

　　<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>

　　

//子组件

<input type='text' onChange={this.props.handleChildValueChange}/>

　　

8.子组件把从父组件拿到的值传给它的子组件

传：<BodyChild {...this.props} id={4}/> //...this.props是获取所有父元素的属性值， id={4}是你自己要扩展的值名字可以随便起

取：<p>{this.props.name}</p>

9.组件：组件时构建在元素的基础之上的。是指在UI界面中，可以被独立划分的，可复用的，独立的模块

无状态函数式组件，没有内部的state，不需要组件生命周期函数，可写成纯函数的形式。

10.规定传参的参数类型

header.propTypes = {//header为你的类型

　　name：PropTypes.string, //项目中引入import PropTypes from 'prop-types' 才可以直接用PropTypes.

　　age: React.PropTypes.number.isRequired //isRequired 代表必传项，不传会报警告

}

　　//如果某个参数非必传没有传时我们可以给它定义默认值

header.defaultProps = {
  name: 'header'}

　　

11.事件和属性的双向绑定

　事件的绑定：　　　　

constructor(){
  super(); //调用基类的所有的初始化方法
  this.state={name:'hhm'} //初始化赋值
};
changeName(k){
  this.setState({name:k}) //更改state值
};
render(){
 return(
 <div>
   <p>{this.state.name}</p>
   <button onClick={this.changeName.bind(this,kk)}>改变</button>
 </div>
 )
}

　　

 12.组件的Refs

　　1.refs是访问到组件内部DOM节点唯一可靠的方法。2.refs会自动销毁对子组件的引用。3.不要在render或render之前对refs进行调用。4不要滥用refs

　　操作DOM元素：

　　第一种方法：　

<input id='btn' value='提交' type='button'/>

var btn=document.getElementById('btn')；

ReactDOM.findDOMNode(btn).style.color ='red'

　　第二种方法：

<input  value='提交' type='button' ref='btn'/>
this.refs.btn.style.color ='red'

　　

13.独立组件间共享Mixins

　　用于在不同组件间共用代码，跟界面有类似的生命周期

　　1.安装react-mixin

　　2.创建存放共享资源的js文件（mixin）　

const  MixinLog={
     log(){
         return 'hhm'    
    }  
};
export default MixinLog

　　3.在需要mixin的组件里引用

import ReactMixin from 'react-mixin';
import MixinLog from './mixins';
ReactMixin (header.prototype,MixinLog) //header是你组件的类名

ReactMixin .log(); //使用

14.react样式

//内联样式,动画，伪类等不能使用
render(){
     const styleHeader = {
        backgroundColor:"#333",
        color:"#fff",
        "padding-top":"15px"    
     };
     return(
         <header style={styleHeader}></header>
    )  
}
//引入外部样式
<header className="btn"></header>

　内联样式的表达式

export default class ComponentHeader extends React.Component{
    constructor(){//初始化构造函数
      super();
      this.state = {head:false}  
    } ;
    switchHeader(){
       this.setState({
        head:!this.state.head
        })    
      };
     render(){
        const styleHead = {
           "padding-top":(this.state.head) ? "3px" : "15px",
           paddingBottom:(this.state.head) ? "3px" :"15px"
        }    
      } ;
      return(
         <div onClick={this.switchHeader.bind(this)}></div>
      )       
}    

     css模块化

　　模块化可以解决全局污染，命名混乱，依赖管理不彻底，无法共享变量，代码压缩不彻底

　　优点：1.所有样式都是local的，解决了命名冲突和全局污染问题

　　　　　2.class名生成规则配置灵活，可以用webpack来压缩class名

　　　　　3.只需引用组件的JS就能搞定组件所有的js和css

　　　　　4.依然是css，几乎零学习成本　　　

　　1.安装babel-plugin-react-html-attrs（在react中可以用class而不用一定要写成className）,(style-loader,css-loader)主要用于css模块化　　

 　　2.引入使用

　　　　在样式表中定义css时：

　　　　　　：local(.trl){color:red}//默认情况下就是：local可以不写

　　　　　　：global(.trd){color:red}//如果想要把该样式污染到全局可以加global

var footerCss = require("../../css/footer.css")
<footer class="footerCss.bgFooter"></footer>

　　jsx样式和css的互转：在线工具http://staxmanade.com/CssToReact/

     Babel是编译JSX用的

　　Ant Design样式框架介绍

　　material-ui：谷歌出的样式框架，主要用于react

　　ant design：阿里的蚂蚁金服出的，它是按需加载

　　　　使用：

　　　　1.安装 npm install antd --save

　　　　2.在你的js里引入import {input} from 'antd' //要用什么就在{}里写什么

　　　　　　引入css ：import 'antd/dist/antd.css '

15.react router

　　1.安装：npm install --save react-router

　　2.使用

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';  //程序入口的index
import List from './list';
import {Router,Route,hashHistory} from 'react-router';
export default class Root extendss React.Component{
   render(){
      return(
        //这里替换了之前的index，变成了程序的入口
        //history控制前进后退    
        <Router history={hashHistory}>
              <Route component={Index} path='/'>
                  //route里可以嵌套子链接，写法相同
                  //在index.js写<div>{this.props.children}</div>
              <Route> 
　　　　　　　　//id是要传递的参数，界面接收时用{this.props.params.id}
              <Route component={List} path='list/:id'><Route>     
       </Router>
     )    
    }    
}
ReactDOM.render(<Root/>,document.getElementById('entry'))    


import {Link} from 'react-router'
<ul>//这里用反引号
    <li><Link to={'/'}>首页</Link></li>
 <li><Link to={'/list/"我是参数"'}>list</Link></li>
</ul>

 DOM操作：

　　findDOMNode():当组件加载到页面之后(mounted)，你可以通过react-dom提供的findDOMNode()方法拿到组件对应的DOM。但是它不能用在无状态的组件上。

import {findDOMNode} from 'react-dom';
componentDidMound(){
  const el = findDOMNode(this);  
}

refs:

　　另外一种方式就是通过在要引用的DOM元素上面设置一个ref属性指定一个名称，然后通过this.refs.name来访问对应的DOM元素.

如果ref是设置在原生HTML元素上，它拿到的就是DOM元素，如果设置在自定义组件上，它拿到的就是组件的实例，这时候就需要通过findDOMNode来拿到组件的DOM元素。

因为无状态组件没有实例，所以ref不能设置在无状态组件上，一般来说这没什么问题，因为无状态组件没有实例方法，不需要ref去拿实例调用相关的方法，但是如果想要拿无状态组件的DOM元素的时候，就需要用一个状态组件封装一层，然后通过ref和findDOMNode去获取。

refs会自动销毁对子组件的引用(当子组件删除时)

this.focusInput=::this.focusInput
focusInput(){
  this.setState({userInput:''},()=>this.refs.theInput.focus())  
}

<input ref='theInput' }
<div onClick={this.focusInput}></div>

 16.组件分为两类分别是：

container：主要是获取数组，状态更新，关乎逻辑的

component：主要是控制界面样式和布局的

17.react无状态组件

const Example = (props) => {
  // 你可以在这使用 Hook
  return <div />;
}

或

function Example(props) {
  // 你可以在这使用 Hook
  return <div />;
}