1.如何引入React(開(kāi)發(fā)基本不使用這種方式)
- CDN引入 （注意順序）
- 引入React：https：//.../react.x.min.js
- 引入 ReactDOM：https://.../react-dom.x.min.js
cjs 和 umd 的區(qū)別
- cjs 全稱CommonJS，是Node.js 支持的模塊規(guī)范
- umd是統(tǒng)一模塊定義,兼容各種模塊規(guī)范(含瀏覽器)
- 理論上優(yōu)先使用umd，同時(shí)支持Node.js和瀏覽器
- 最新的模塊規(guī)范是使用import和export關(guān)鍵字
通過(guò)webpack引入React
- yarn add react react-dom
- import React from 'react'
- import ReactDOM from 'react-dom'
- 注意大小寫(xiě),盡量保持一致
- 還可用create-react-app一鍵代替以上步驟
其他
- 除webpack外，rollup、parcel也支持上面寫(xiě)法
引入React：新手用create-react-app，老手用webpack/rollup
2. 開(kāi)始創(chuàng)建React應(yīng)用
yarn global add create-react-app
create-react-app demo1(文件名)
然后一個(gè)React項(xiàng)目便初步搭建
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>你好</div>,
document.getElementById('root')
);
屏幕顯示'你好'
3. React 初體驗(yàn)
對(duì)比React元素和函數(shù)組件
- App1 = React.createElement( 'div', null, n)
- App1是一個(gè) React元素
- App2 =()=> React.createElement( 'div', null,n)
- App2是一個(gè) React函數(shù)組件
啟示
- 函數(shù)App2是延遲執(zhí)行的代碼，會(huì)在被調(diào)用的時(shí)候執(zhí)行
- 這是代碼執(zhí)行的時(shí)機(jī)，并不是同步和異步
React元素
- createElement的返回值element可以代表一個(gè)div
- 但element并不是真正的div (DOM對(duì)象)
- 所以我們一般稱element為虛擬DOM對(duì)象
（）=> React 元素
- 返回element的函數(shù),也可以代表一個(gè)div
- 這個(gè)函數(shù)可以多次執(zhí)行，每次得到最新的虛擬div
- React 會(huì)對(duì)比兩個(gè)虛擬div，找出不同，局部更新視圖
- 找不同的算法就叫做DOM Diff算法
4. JSX初體驗(yàn)
Vue的模板寫(xiě)法 Vue-loader
.vue文件里寫(xiě)
<template> <script> <style>通過(guò)vue-loader變成一個(gè)構(gòu)造選項(xiàng)
React的 JSX
可以把
<button onClick="add">+1</button>變成
React.createElement('button',{onClick:...},'+1')與Vue-loader 類(lèi)似
在 React 這里叫做 babel-loader ，并且被內(nèi)置在webpack里面了
當(dāng)然也可以使用 CND 引入 babel-loader
使用 JSX
- 方法一
- CND引入
- 引入babel.min.js
- 把<script>改成<script type="text/babel">
- babel會(huì)自動(dòng)進(jìn)行轉(zhuǎn)譯(可以理解為翻譯),此處畫(huà)圖
- 這種方式似乎并不支持src
- 在生產(chǎn)環(huán)境下盡量不要使用 CND引入，效率太低
- 他要下載一個(gè) babel.min.js
- 它還要在瀏覽器端把 JSX 翻譯成 JS
// 引入 JSX 后的寫(xiě)法
<script type='text/babel'>
let n = 0;
const App = () => (
<div> // 標(biāo)簽直接寫(xiě)
{n} // 變量使用
<button
onclick = { // 函數(shù)花括號(hào)括起來(lái)
() => {
n++;
render();
}
}
>
+1
<button>
</div>
);
const render = () => React.render(<App />,document.querySelector('#app'));
render();
</script>
- 方法二
可以使用 webpacl + babel-loader
- 方法三
使用 create-react-app
- 跟@vue/cli用法類(lèi)似
- 全局安裝yarn global add create-react-app
- 初始化目錄create-react-app react-demo-1
- 進(jìn)入目錄cd react-demo-1
- 開(kāi)始開(kāi)發(fā)yarn start
- 這時(shí)App.js便會(huì)默認(rèn)就使用 jsx 語(yǔ)法
- 這是因?yàn)閣ebpack 讓JS默認(rèn)走babel-loader
注意事項(xiàng)
<div className='red'>n</div> <!-- 類(lèi)名要寫(xiě)成className -->因?yàn)檫@會(huì)被翻譯成
React.createElement('div',{className:'red'},'n');標(biāo)簽里面的所有JS代碼都要使用 {} 花括號(hào)包起來(lái)
5. 條件判斷
在 React 里面
const Compomnent = () => {
return n%2 === 0 ？ <div>n是偶數(shù)</div> : <span>n是奇數(shù)</span>;
}
// 如果需要外面的div，可以寫(xiě)成
const Component = () => {
return (
<div>
{
n%2 === 0? <div>n是偶數(shù)</div> : <span>n是奇數(shù)</span>
}
</div>
)
}
還可以寫(xiě)成
const Component = () => {
const content = (
<div>
{
n % 2 === 0? <div> n是偶數(shù) </div> : <span> n是奇數(shù) </span>
}
</div>
)
return content
}
還可以寫(xiě)成
const Component = () => {
const inner = n% 2 ===0? <div> n是偶數(shù) </div> : <span> n是奇數(shù) </span>
const content = (
<div>
{ inner }
</div>
)
return content
}
如果想要使用 if else
const Component = () => {
let inner
if(n%2===0){
inner = <div>n是偶數(shù)</div>
} else {
inner = <span> n是奇數(shù) </span>
}
const content = (
<div>
{ inner }
</div>
)
return content
}
6. 循環(huán)語(yǔ)句
在 React 里面使用循環(huán)
const Component = (props) => {
return props.number.map((n,index) => {
return <div>下標(biāo){index}值為{n}</div>
})
}
// 如果需要使用外面的 div，可以寫(xiě)成
const Component = (props) => {
return (
<div>
{
props.number.map((n,index) => {
return <div> 下標(biāo) {index} 值為 {n} </div>
})
}
</div>
)
}
還可以這樣寫(xiě)
const Component = (props) => {
const array = []
for(let i = 0; i<props.length;i++){
array.push(<div> 下標(biāo){i} 值為 {props.numbers[i]} </div>)
}
return <div>{ array }</div>
}
