簡(jiǎn)介：
當(dāng)2014年Facebook推出React時(shí)譬嚣，給整個(gè)業(yè)界帶來(lái)全新的看待網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)的方式钢颂，和React一同問(wèn)世的Flux，也克服傳統(tǒng)MVC框架的很多弊病拜银。技術(shù)在不斷發(fā)展殊鞭，在2015年，F(xiàn)lux的一個(gè)變體Redux出現(xiàn)盐股，進(jìn)一步優(yōu)化了Flux的功能钱豁。

優(yōu)秀之處：

專注視圖層：（處理路由，數(shù)據(jù)疯汁，以及邏輯的處理）
VirtualDom：只對(duì)虛擬dom更新，不對(duì)真實(shí)dom更新卵酪；只對(duì)dom進(jìn)行必要的更新幌蚊，實(shí)現(xiàn)的重繪的最小化；

Vue與React的異同點(diǎn)
React和Vue都是很優(yōu)秀的框架溃卡，它們之間的相似之處多過(guò)不同之處溢豆，并且大部分的優(yōu)秀功能是相通的，核心在于封裝dom操作瘸羡，專注視圖層的輕量級(jí)框架

相同點(diǎn)：

用虛擬DOM實(shí)現(xiàn)快速渲染漩仙，提升性能（虛擬dom就是一個(gè)js對(duì)象，用它來(lái)描述真實(shí)dom,之所以可以提高性能js里面去比較js對(duì)象不怎么耗性能犹赖，但是比較真實(shí)的dom會(huì)很耗性能）
語(yǔ)法簡(jiǎn)單的輕量級(jí)MVVM框架（）
同時(shí)支持服務(wù)端客戶端渲染
生態(tài)優(yōu)良队他，各種打包工具，路由峻村，代碼分割麸折，數(shù)據(jù)管理，swiper粘昨，echart全家桶

異同點(diǎn)：

react適配多端（web頁(yè)面垢啼，客戶端頁(yè)面）
react虛擬dom操作diff算法算出最小修改的需求的地方，dom操作合并
vue生態(tài)圈越來(lái)越強(qiáng)大张肾，構(gòu)建強(qiáng)大的應(yīng)用也不是問(wèn)題
公司選啥你選啥芭析，哪個(gè)用的爽選哪個(gè)

1.png

jsx語(yǔ)法：

1)  高內(nèi)聚，低耦合 （組件的設(shè)計(jì)要素）   
高內(nèi)聚：把邏輯緊密相關(guān)的內(nèi)容放在一個(gè)組件中吞瞪；
低耦合：不同組件之間的依賴關(guān)系要盡量弱化馁启；盡量保持每個(gè)組件的獨(dú)立性；
2)  onClick 不是原生dom中的onclick事件尸饺，這里是onClict是通過(guò)react的事件委托方式进统，觸發(fā)掛在頂層dom節(jié)點(diǎn)上的一個(gè)事件處理函數(shù)（提高了性能）助币；
3)  可以將樣式一起寫(xiě)入組件文件中；
4)  關(guān)于jsx語(yǔ)法的說(shuō)法：
    在jsx語(yǔ)法中可以直接寫(xiě)入組件螟碎，注意組件為了和普通標(biāo)簽區(qū)別眉菱，必須第一個(gè)字母大寫(xiě)；
    jsx語(yǔ)法是歷史的進(jìn)步還是倒退掉分；（樣式俭缓，結(jié)構(gòu)，邏輯于一體）
4酥郭、  活躍的生態(tài)圈：（開(kāi)源項(xiàng)目）
5华坦、  組件式開(kāi)發(fā)

react的工作方式：

（1）從繁瑣的dom處理中解脫出來(lái)，響應(yīng)式不从，函數(shù)式編程思維惜姐；輸入相同的數(shù)據(jù)，將產(chǎn)出相同的效果椿息；數(shù)據(jù)更新歹袁，dom同時(shí)做出更新；
（2）Virtual Dom
Dom：結(jié)構(gòu)化文本的抽象表達(dá)式寝优；
虛擬dom：對(duì)dom樹(shù)的抽象玩裙，不會(huì)觸及瀏覽器魄健，只存在于js內(nèi)存的空間樹(shù)形結(jié)構(gòu)拭荤，每次的數(shù)據(jù)刷新润匙，render函數(shù)的執(zhí)行都會(huì)觸發(fā)一個(gè)新舊虛擬dom 的對(duì)比，如果無(wú)改變钻心，則不更新凄硼，有改變，只更新相應(yīng)dom結(jié)構(gòu)扔役；

自動(dòng)化構(gòu)建項(xiàng)目：

1帆喇、 初始化：
全局安裝：
npm install –-global create- react- app
初始化項(xiàng)目：
create- react- app myReactApp （ React腳手架工具: create-react-app）
啟動(dòng)服務(wù)：
cd myReactApp
npm start
2、引用index.js

1.png

3.組件的寫(xiě)法

在React中創(chuàng)建組件有三種方式：
ES5寫(xiě)法：React.createClass
ES6寫(xiě)法：React.Component
無(wú)狀態(tài)的函數(shù)寫(xiě)法亿胸，又稱為純組件SFC
原文: https://www.w3cplus.com/react/stateful-vs-stateless-components.html ? w3cplus.com

React.Component寫(xiě)法

import React from 'react';
import List from './list.jsx'; //子組件
export default class Chart extends React.Component{
constructor(){
    super();
    this.state={
        list:[{
            name:'琪芭比'
            }]
            }
}
render(){
          return <div>{
     //注釋方法  {/** 對(duì)比vue的v-for坯钦，react用map方法遍歷數(shù)組，map有返回 forEach沒(méi)有返回*/}
        this.state.list.map((item,index)=>{ 
            return <div key={index}>
                <div>
                <p>{item.name}</p>
                <p>{item.price}</p>
                <p>{item.num}</p>
                </div>
            </div>
        })
    }</div>
}
}

無(wú)狀態(tài)的函數(shù)寫(xiě)法
無(wú)狀態(tài)的函數(shù)創(chuàng)建的組件是無(wú)狀態(tài)組件侈玄，它是一種只負(fù)責(zé)展示的純組件：

function HelloComponent(props) {
    return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="marlon" />, mountNode)

最后ps:總的來(lái)說(shuō)：無(wú)狀態(tài)函數(shù)式寫(xiě)法 優(yōu)于React.createClass婉刀，而React.Component優(yōu)于React.createClass。能用React.Component創(chuàng)建的組件的就盡量不用React.createClass形式創(chuàng)建組件序仙。

React組件的數(shù)據(jù)
組件內(nèi)部數(shù)據(jù)類型：
兩種數(shù)據(jù)結(jié)構(gòu)突颊，prop和state，這兩種數(shù)據(jù)的改變都會(huì)引起組件的重新渲染；

1律秃、 Prop：組件的外部接口爬橡，接受外部數(shù)據(jù)；跟html的屬性的書(shū)寫(xiě)類似棒动，但是除了接受字符串之外糙申，還可以接受js對(duì)象，數(shù)字等的船惨；如果組件進(jìn)行數(shù)據(jù)反饋給外界柜裸，可以通過(guò)prop傳入組件一個(gè)函數(shù)；
? Prop的讀攘蝗瘛：
由class類的constructor函數(shù)接受疙挺，以及super（）方法調(diào)用時(shí)的傳入；
最后的props為一個(gè)對(duì)象怜浅，鍵值分別為傳入時(shí)的屬性名铐然；這里比較方便的是使用es6的解構(gòu)賦值；
? PropTypes的檢查：
可以通過(guò)增加類的propTypes屬性來(lái)定義prop規(guī)格海雪，在constructor函數(shù)中進(jìn)行如下定義：
Index.propTypes={ //組件全局進(jìn)行配置
caption:PropTypes.string.isRequired,
initValue:PropTypes.number
}
注意：此屬性不會(huì)影響組件的渲染锦爵，只是做到在開(kāi)發(fā)過(guò)程中輔助開(kāi)發(fā)；

2奥裸、 State：由于組件不能改變出入的prop，所以當(dāng)組件要進(jìn)行自己的狀態(tài)紀(jì)錄時(shí)就需要用到state沪袭；
? 初始化：state的初始化可以在constructor中湾宙，通過(guò)this.state進(jìn)行設(shè)置，值必須為一個(gè)js對(duì)象的格式冈绊，通常將prop傳入的外部值賦給state侠鳄，以便后續(xù)操作；設(shè)置默認(rèn)值時(shí)死宣，可以用 | | 操作符進(jìn)行伟恶；
? 讀取和更新state
更新使用this.setState({count:this.state.count++})方法；
讀取為：this.state.count這種方式
3毅该、 Prop和state的對(duì)比：
Prop：定義外部接口博秫；賦值在外部環(huán)境使用組件時(shí)；組件內(nèi)部不能更改
State:紀(jì)錄內(nèi)部狀態(tài)眶掌；賦值在組件內(nèi)部挡育；在組件內(nèi)部可以進(jìn)行更改；
PropTypes類型檢查
在react的15.5版本后朴爬，React.PropTypes已經(jīng)廢棄了即寒，需要單獨(dú)引入prop-types庫(kù)進(jìn)行驗(yàn)證

importPropTypes from 'prop-types'
class Children extends Component {
　　constructor(props) {
　　super(props)
　　}
　　render() {
　　　return (
　　　　　<div>
　　　　　　　<p>這里是子組件</p>
　　　　　　　{this.props.name}
　　　　　</div>
　　　　)
　　　}
　　　　}
　　Children.propTypes={
　　　　name:PropTypes.string
　　　}

prop-types庫(kù)可以校驗(yàn)的類型如下：

importPropTypes from 'prop-types';
MyComponent.propTypes = {
　　　// 你可以將屬性聲明為以下 JS 原生類型
　　　optionalArray:PropTypes.array,
　　　optionalBool:PropTypes.bool,
　　　optionalFunc:PropTypes.func,
　　　optionalNumber:PropTypes.number,
　　　optionalObject:PropTypes.object,
　　　optionalString:PropTypes.string,
　　　optionalSymbol:PropTypes.symbol,
// 任何可被渲染的元素（包括數(shù)字、字符串、子元素或數(shù)組）母赵。
　　　optionalNode:PropTypes.node,
          // 一個(gè) React 元素
　　　optionalElement:PropTypes.element,
          // 你也可以聲明屬性為某個(gè)類的實(shí)例逸爵，這里使用 JS 的
　　　// instanceof 操作符實(shí)現(xiàn)。
optionalMessage:PropTypes.instanceOf(Message),
// 你也可以限制你的屬性值是某個(gè)特定值之一
　optionalEnum:PropTypes.oneOf(['News', 'Photos']),
    　// 限制它為列舉類型之一的對(duì)象
　　optionalUnion:PropTypes.oneOfType([
　　PropTypes.string,
　　PropTypes.number,
　　PropTypes.instanceOf(Message)
　　]),
      // 一個(gè)指定元素類型的數(shù)組
optionalArrayOf:PropTypes.arrayOf(PropTypes.number),
  　// 一個(gè)指定類型的對(duì)象
　　　　　　　　optionalObjectOf:PropTypes.objectOf(PropTypes.number),
        // 一個(gè)指定屬性及其類型的對(duì)象
　　optionalObjectWithShape:PropTypes.shape({
　　　color:PropTypes.string,
　　　fontSize:PropTypes.number
　　　}),
    // 你也可以在任何 PropTypes 屬性后面加上 `isRequired` 
　// 后綴凹嘲，這樣如果這個(gè)屬性父組件沒(méi)有提供時(shí)师倔，會(huì)打印警告信息
　　requiredFunc:PropTypes.func.isRequired,
    // 任意類型的數(shù)據(jù)
　requiredAny:PropTypes.any.isRequired,
    // 你也可以指定一個(gè)自定義驗(yàn)證器。它應(yīng)該在驗(yàn)證失敗時(shí)返回
　// 一個(gè) Error 對(duì)象而不是 `console.warn` 或拋出異常施绎。
　// 不過(guò)在 `oneOfType` 中它不起作用溯革。
　　　customProp:function(props, propName, componentName) {
　　if (!/matchme/.test(props[propName])) {
　　　returnnewError('Invalid prop `' + propName + '` supplied to' +' `' + componentName + '`. Validation failed.');
　　　　　　　　　　　　　}
　　　　　　　　　　　},

　　　　　　　　// 不過(guò)你可以提供一個(gè)自定義的 `arrayOf` 或 `objectOf` 
　　　　　　　　// 驗(yàn)證器，它應(yīng)該在驗(yàn)證失敗時(shí)返回一個(gè) Error 對(duì)象谷醉。它被用
　　　　　　　　// 于驗(yàn)證數(shù)組或?qū)ο蟮拿總€(gè)值致稀。驗(yàn)證器前兩個(gè)參數(shù)的第一個(gè)是數(shù)組
　　　　　　　　// 或?qū)ο蟊旧恚诙€(gè)是它們對(duì)應(yīng)的鍵俱尼。
　　　　　　　　customArrayProp:PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
　　　　　　　　　　if (!/matchme/.test(propValue[key])) {
　　　　　　　　　　　　returnnewError(
　　　　　　　　　　　　　　'Invalid prop `' + propFullName + '` supplied to' +
　　　　　　　　　　　　　　' `' + componentName + '`. Validation failed.'
　　　　　　　　　　　　　);
　　　　　　　　　　　　}
　　　　　　　　　　　})
　　　　　　　　　　};

目標(biāo)設(shè)置-思維導(dǎo)圖.png