箭頭函數(shù)與普通函數(shù)區(qū)別
箭頭函數(shù):()=>{}沒(méi)有自己的this,它使用的this是其外部環(huán)境的this
普通函數(shù)：function() {}，有自己的this译柏，它的this是在運(yùn)行時(shí)指定的驶忌，可通過(guò)call,apply,bind去改變
call和apply在傳參形式上不同
bind與call和apply不同之處在返回值不同，bind是直接返回函數(shù)本身顽照，后面再加一個(gè)小括號(hào)才表示調(diào)用誊酌，而call和apply是直接執(zhí)行
React:
React 起源于 Facebook ,誕生說(shuō)2013,4
React主要用于構(gòu)建UI。你可以在React里傳遞多種類型的參數(shù)，如聲明代碼侥猬，幫助你渲染出UI例驹、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動(dòng)態(tài)變量退唠、甚至是可交互的應(yīng)用組件眠饮。
特點(diǎn)：
1.聲明式設(shè)計(jì)：React采用聲明范式，可以輕松描述應(yīng)用铜邮。
2.高效：React通過(guò)對(duì)DOM的模擬仪召，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫(kù)或框架很好地配合松蒜。
React:核心文件
React-DOM：是將虛擬DOM最終構(gòu)建成真實(shí)DOM扔茅，并最終渲染到頁(yè)面上的技術(shù)
建議使用：vs code
一、安裝React
1.第一種安裝秸苗，用script引入方式（不推薦）
<script src="https://unpkg.com/react@16.4.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script>
function Header() {
return <div>我是頭部</div>
}
//ReactDOM.render(要渲染的內(nèi)容,要渲染到哪里);
ReactDOM.render(<Header />,document.getElementById('app'));
</script>
如果安裝npm慢召娜，換成淘寶鏡像
npm的鏡像替換成淘寶
1.得到原本的鏡像地址
npm get registry
設(shè)成淘寶的
npm config set registry http://registry.npm.taobao.org/
2.用create-react-app腳手架搭建項(xiàng)目
npm install create-react-app -g
create-react-app 項(xiàng)目名
jsx 標(biāo)簽快速添加語(yǔ)法：
解決
這個(gè)其實(shí)vs code是支持的，只是默認(rèn)設(shè)置不支持惊楼，需要手動(dòng)設(shè)置一下玖瘸，設(shè)置步驟：
點(diǎn)擊左下角“設(shè)置”
搜emmet
設(shè)置如下屬性
"emmet.triggerExpansionOnTab": true
- 定義一個(gè)react組件：
1.函數(shù)組件
function Header () {
return <div>1603A</div>
}
ReactDOM.render(<Header />, document.getElementById('app'));
2.類組件：
import React,{Component} from 'react';
class 類名 extends React.Component
{
render() {
return (<div></div>);
}
}
例如：
class HeaderCom extends Component {
render() {
return (
<div>頭部組件111</div>
);
}
}
注意：
render方法中的return 根標(biāo)簽只能有一個(gè)
4.為組件添加樣式
1.引入css樣式文件
例如： import './index.css'
2.js對(duì)象方式引入樣式
例如：
import Styles from './indexStyle'
<div className="ft" style={ Styles.ft }>底部footer組件</div>
合并對(duì)象： Object.assign(Styles.ft,Styles.txt)
-
遍歷 主要用數(shù)組map方法
例如：
arr.map((item,index)=>{ return ( <li className="lis" key={item.id} > <p>品牌：{ item.name }</p> <p>價(jià)格：{ item.price }</p> </li> ); }) }
注意：遍歷時(shí)要給遍歷的元素添加key屬性，否則會(huì)報(bào)警告
6.顯示隱藏 主要利用js的三目運(yùn)算符實(shí)現(xiàn)
格式： 條件 ? 滿足 : 不滿足
例如： { flag ? good : bad }
7.如何綁定事件
<標(biāo)簽名 onClick={ this.函數(shù)名.bind(this) }>內(nèi)容</標(biāo)簽名>
例如：
<button onClick={ this.changeShowHide.bind(this) }>切換顯示和隱藏</button>
es6編寫reactjs事件處理函數(shù)綁定this三種方式：
https://www.cnblogs.com/feiying100/p/6649611.html
8.如何設(shè)置初始值
constructor() {
super();
//相當(dāng)于vue中的data Vue({ data:{ } })
this.state={
屬性1:值1檀咙，
屬性2:值2
.....
}
}
訪問(wèn)值：this.state.屬性名
- 如何同步數(shù)據(jù)到視圖（頁(yè)面）上
this.setState({
要改的屬性：值
})
