react使用筆記及生命週期

時間 2019-11-09

原文原文鏈接

react-intl：作國際化的javascript

react只是dom的一個抽象層，並非web應用的完整解決方案。它沒涉及到代碼結構和組件之間的通訊css

react components的生命週期，在瀏覽器中的三個狀態：html

　　Mounted（React.renderComponent()）:React components被render解析生成對應的DOM節點並被插入瀏覽器的DOM結構的一個過程。java

　　update(setState(),setProps()):一個mounted的React Components被從新render的過程。從新渲染的過程並非說相應的dom必定會發生變化， react會把這個component的當前state和最近一次的state進行對比。只有當state確實發生了改變，而且影響到了dom結構的時候，react纔會去更新dom。 react

　　Unmounted: 一個mounted的react Components對應的DOM節點被從DOM結構中移除的這樣一個過程。每個狀態react都封裝了對應的hook（鉤子）函數，在對特定的事件進行webpack

1.原生HTMl元素名以小寫字母開頭，而自定義的React類名以大寫字母開頭，好比HelloMessage不能寫成helloMessage.除此以外還須要注意組件類只能包含一個頂層標籤，不然也會報錯web

react主要是view層算法

數據單向綁定npm

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：主要是控制界面樣式和佈局的