最近用參與了一個項目，用了redux+react+webpack的前端技術做一個web app,長話短說，下面的日常中的一些記錄（有些是自己從網上收集的，如果原作者看到請聯系我，）
react中需要注意的地方
1，行內樣式
在在React中，style行內樣式不再是一個簡單的字符串。愛掏網 - it200.com它是一個{}的對象，這個對象里邊的key是樣式名稱的駝峰命名顯示，而value則是你想要的樣式值
style = {
backgroundImage : 'url(' + imgUrl +')' ,
color:'white',
}
ps：img和background的應用場景
img使用場景：
圖片是內容的一部分，使用img標簽加上alt屬性
打印頁面并且需要你想要的圖片
依賴于瀏覽器縮放圖形并且可以呈現不錯的效果
配合z-index伸展背景圖片來填充整個窗口
使用img代替背景圖可以顯著提高性能的動畫背景
IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像，加載樣式表加載后,延遲加載的網頁。愛掏網 - it200.com
bg的使用場景
圖片不是內容的一部分
圖片代替文本使用
打印頁面并且 不 需要你想要的圖片
需要縮短下載使用通過css sprites
如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image。愛掏網 - it200.com
2,jsx語法中的if/else
如果你使用三元表達式感覺自己的代碼不夠健壯，你可以在非JSX語法外，使用if來決定用哪個JSX語法塊。愛掏網 - it200.com
var loginButton;
if (loggedIn) {
loginButton =
} else {
loginButton =
}
注意：react在render時只能渲染一個標簽
web端使用rem為字體單位
rem是相對于根元素，意味著我們只需要在根元素確定一個參考值
上半部分講工作的一些流程，后半說整體框架
首先日常工作中 如果先做靜態頁面的話：
首先需要創建路由 ，這里用到的是react-rount
React Rounter是一個基于React之上的強大路由庫，它可以讓你向應用中快速的添加試圖和數據流和數據流，同時保持頁面與URL
間的同步,React Router 適用于小型網站
添加首頁可以使用IndexRoute來設置一個默認頁面
我們可以將 /inbox 從 /inbox/messages/:id 中去除，并且還能夠讓 Message 嵌套在 App -> Inbox 中渲染
{/ 當 url 為/時渲染 Dashboard /}
URL 組件
/ App
/about App -> About
/inbox App -> Inbox
/inbox/messages/:id App -> Inbox -> Message
讓 UI 從 URL 中解耦出來
{/ 使用 /messages/:id 替換 messages/:id /}
因為Redux 由 Flux 演變而來，所以下面的一些解釋（用（）的）把flux的概念混合進去可以更容易理解
action
Action 是把數據從應用傳到 store 的有效載荷。愛掏網 - it200.com它是 store 數據的唯一來源（視圖層發出的消息，如一些onClick（react的語法）的事件操作）
//不帶參數
const actiondemo =()=>{
types:['LOADING','DEMO','LOAD_FAIL'],
request:{
url:'/home', -----------后臺的api接口
}
}
export {actiondemo}; --把action接口暴露出來
至于action里的types,和request的方法都來源于api.js（后臺再講）
//帶參數
const actiondemo =(data)=>{
types:['LOADING','DEMO','LOAD_FAIL'],
request:{
url:'/home', -----------后臺的api接口,
data:data---------------一般需要你傳一些數據到后臺去的預留接口
}
}
reducer
Action只是描述了有事情發生了這一事實，并沒有指明應用如果更新state。愛掏網 - it200.com而這正是 reducer 要做的事情。愛掏網 - it200.com
const reducerdemo = (state={},action) => {
switch(action.type){
case DEMO:
return {
...state,
res:action.res
};
default:
return state;
}
};
redux中的state和react的state的區別
react中的state:指的是組件的狀態數據
redux中的state：指的是store中具體reducer當前的數據
jsx
import React, { Component, PropTypes } from 'react'; ---使用react里面一些模塊
import { connect } from 'react-redux'; --收到action,怎么讓store更新的關鍵
const propTypes = {
showdemo: PropTypes.func.isRequired, //申明為func類型
}
知識點1：react可復用組件
設計接口的時候，把通用的設計元素（按鈕，表單框，布局組件等）拆成接口良好定義的可復用的組件
Prop驗證
隨著應用不斷變大，保證組件被正確使用變得非常有用，為此我們引入 propTypes
React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據的有效性。愛掏網 - it200.com
當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。愛掏網 - it200.com
注意為了性能考慮，只在開發環境驗證 propTypes
知識點2：connect()
中才能使用connect()方法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
連接React組件與Redux store
examples
只注入dispatch,不監聽store
export default connect()(TodoApp);
注入dispatch和全局state（不要這么做，這會導致每次action都觸發整個TodoApp重新渲染，你做的所有性能優化都將付之東流）
最好多個組件上使用connect()，每個組件只監聽它所關聯的部分state
export default connect(state=>state)(TodoApp) -----------不要這么做
注入dispatch和todos
const mapStateToProps = state =>({
page:state.common.page || ''
})
export default connect(mapStateToProps)(TodoApp);
注入todos和所有action creator(addTodo,completeTodo,..)
import * as actionCreators from '../actions/actionCreators';
const mapStateToProps = state =>({
page:state.common.page || ''
})
export default connect(mapStateToProps, actionCreators)(TodoApp);
注入 todos 并把所有 action creator 作為 actions 屬性也注入組件中
import * as actionCreators from '../actions/actionCreators';
const mapStateToProps = state =>({
page:state.common.page || ''
})
const mapDispatchToProps = dispatch =>({
return {actions : bindActionCreators(actionCreators,dispatch)};
})
export default connect(mapStateToProps, actionCreators)(TodoApp);