react 學習筆記（一）

 

react-hot-loader 局部熱更新與webpack 熱更新 分析：

webpack-dev-server 的熱加載是開發人員修改了代碼通過打包，從新刷新了整個頁面。而 react-hot-loader 不會刷新整個頁面，它只替換了修改的代碼，作到了頁面的局部刷新。但它須要依賴 webpack 的 HotModuleReplacement 熱加載插件

import { AppContainer } from 'react-hot-loader'；

render(
<AppContainer>
　　<container/>
</AppContainer>,
app
);

2.redux 分析

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});
上面代碼中，reducer函數收到名爲ADD的 Action 之後，就返回一個新的 State，做爲加法的計算結果。其餘運算的邏輯（好比減法），也能夠根據 Action 的不一樣來實現。

 推薦redux 莞式教程，很清晰https://github.com/kenberkeley/redux-simple-tutorial

 

父子組件傳值（react 父子組件通訊）：

父組件給子組件傳值

　　1.在調用子組件的時候定義一個屬性 <Header title={this.state.msg}></Header>    ----------子組件使用方式this.props.msg 獲取到父組件傳下來的數據

　　2.父組件給子組件傳入一個方法   

　　　　父組件定義：<Header method={this.method}>       子組件中獲取父組件中的方法： <button onClick={this.props.method}>調用父組件的方法</button>

　　3. 父組件能夠將本身傳給子組件 <Header father={this}></Header>   ------>子組件經過 this.props.father.XX獲取數據或者方法

　　　　　　　　　　　　　　　　　    ^　　^　　^　　^　　^

　　　　　　　　　　　　　　　　　　||　　||　　||　　||　　||
說明：父組件不只能夠給子組件傳值，還能夠給子組件傳方法,以及把整個父組件傳給子組件,可讓子組件給父組件傳值。

 

父組件主動獲取子組件的數據

　　一、父組件調用子組件的時候指定ref的值 <Header ref='header'></Header>
 
　　二、父組件經過this.refs.header 獲取整個子組件實例 (dom（組件）加載完成之後獲取 )

 

校驗值類型： defaultProps  propsTypes

defaultProps:父子組件傳值中，若是父組件調用子組件的時候不給子組件傳值，能夠在子組件中使用defaultProps定義的默認值

propTypes：驗證父組件傳值的類型合法性

　　一、引入import PropTypes from 'prop-types';

　　二、類.propTypes = {
　　　　name: PropTypes.string
　　　　};

　　3.類.defaultProps={

　　name:

}

注意：二者都是定義在子組件裏面

 

react中循環出數據

constructor(props){
    super(props);
    this.state({
    list:[]
})
}

render(){
<ul>
{
    this.state.list.map(value,key){
      return <li key={key}>{value.title}</li>      
    }    
}
</ul>
}

 條件渲染

　　描述：根據組件的狀態，只渲染組件中的一部分，咱們能夠像在JavaScript中寫條件語句同樣地寫條件渲染語句： 這裏我只介紹使用變量存儲元素和函數來render  ，將不介紹 &&運算符 和三目運算符 這些經常使用到的

//使用變量來存儲元素
function Component (props){

    var button;

　　const isState = props.isState;

　　if (isState) {

　　　　button = <button>退出</button>

　　} else {

　　　　button = <button>登錄</button>

　　}

　　return <div>你能夠{button}</div>;

}

render(){
　<div>
　　<Component isTrue={false}/>
　</div>
}

//阻止組件渲染，有時候咱們須要等到有指定的值時，渲染指定的組件，而不形成組件切換閃動的狀況，我麼你能夠經過在render函數中返回一個null,來實現咱們逍遙的效果
<Component1 />
<Component2 /> // 1 2 是兩個組件

state={
isfalse:false
}

Component=()=>{

　　const { getData } = this.props  //請求返回的數據，未返回 undefind  返回則有數據

　　const { isfalse } = this.state

　　if(getData){
　　　　if(isfalse{
　　　　　　return <Component1 />
　　　　}else{
　　　　　　return <Component2 />
　　　　}
　　}else{
　　　　return null
　　}
}

render(){　<div>　{this.Component()}　</div>}