03集
JSX
jsx里面可以寫 表達式,表達式里面會返回一個值
js語法的擴展,需要babel解析才能夠在瀏覽器運行
語法
使用花括號 {} ,在里面進行編寫jsx代碼
04集
高頻場景
使用引號傳遞字符串
使用js變量
函數調用和方法調用
使用js對象.js自帶的一些對象或new出來的對象
{"this is msg"}
{count}
{getName()}
{new Date().getDate()}
// 使用js對象 {{color:'red',ackground:'green'}}
05集 jsx實現列表渲染
通過 js 的map 方法進行遍歷,這里不能夠使用for循環
因為 for 不返回值 但是 map 有返回值
{list.map(item => <li key={item.id}>{item.name}</li>)}
這個值可以是字符串,也可以是數字 ,只要唯一即可
06集 條件渲染
這里通過 && (邏輯與), ? : (三元表達式) 實現
{fla &7 <span>this is span</span>}
{loading ? <span>loading......</span> : <span>this is span</span>}
07集 復雜情況-非常多元素
控制非常多的元素,決定是否顯示以及顯示哪些
通過函數實現.通過自定義函數 + if 判斷語句
// 在 APP.js 里面書寫
const articleType = 1
function getArticleTem(){if(articleTyp === 1){return <div>我是無圖模式</div>}if(articleTyp === 2){return <div>我是單圖模式</div>}if(articleTyp === 3){return <div>我是三圖模式</div>}
}
function App(){return (<div className='App'>{getArticleTem()}</div>)
}
08集-React事件綁定
on + 事件名稱
const handler = () => {console.log("button被點擊了")}
<button onClick='handler'>按鈕</button>
形參 e
這個e是當前組件
用的最多的是target,e.target
const handler = (e) => {console.log("button被點擊了",e)}
<button onClick='handler'>按鈕</button>
傳遞自定義參數
通過箭頭函數調用
const handler = (e) => {console.log("button被點擊了",e)}
<button onClick='() => {handler('jack')}'>按鈕</button>
同時傳遞 e 和 自定義參數
const handler = (e) => {console.log("button被點擊了",e)}
<button onClick='(e) => {handler('jack')}'>按鈕</button>
09 集 組件
組件有自己的UI和邏輯,可以和其他組件互相嵌套
組件可以復用多次
開頭首字母大寫
下面就是自定義組件
function Button(){return <Button>click me!</Button>
}
使用,兩種使用方式
<Button />
<Button></Button>
10集 useState
react的hook函數.向組件添加一個狀態變量,影響組件的渲染結果
// 第一個是變量,第二個是函數,用來修改count的值,第三個括號里面是count初始值
const [count,setSount] = useState(0)
function App(){useState [count,setCount] = useState(0)// 這里修改了,組件會重新渲染const change = () => {setCount(count+1)}return (<div><button onClick={change}>{count}</button></div>)
}
如果修改了值,則這個組件會重新渲染
11集 useState修改規則
只有通過 setCount,也就是在 useState里面寫的方法,才會重新渲染組件
修改對象–{name:“小明”}
通過方法
const [name,setName] = useState({name:"小李"})
const change = () =>{setName(...name{name:"小6"})
}
12集-基礎樣式控制
行內樣式
不推薦
樣式屬性字段需要駝峰形似書寫
抽取行內樣式
const style = {//todo}
然后把對象放進去
class類名控制
1. 寫css文件,里面寫樣式1.1 .foo{background: green;}
3. import './index.css'
4. <div className='foo'></div>
13集列表渲染
自己去B站看怎么實現吧,老師準備的課件比較麻煩,需要自己寫
這里需要定義一個方法,然后再函數里面使用map的遍歷方法進行遍歷,然后返回
14集-刪除評論功能實現
給每個數據加上一個 key={item.id} ,然后添加方法 ,遍歷數組,相等就刪除,然后再重新賦值
自己的評論才顯示刪除按鈕,需要多一個判斷,當前用戶userid和評論的userid相等才顯示刪除按鈕
15集-切換tab功能實現
固定套路: 1 點擊哪個tab,記錄該tab的id 2. 然后再遍歷的時候,和每個tab做匹配,如果匹配上,就把需要高亮顯示的tab上寫上對應的樣式
通用思路
記錄當前tab的唯一id
第二步,使用 {},里面在使用 ${} 比較當前評論所屬type是否和點擊的 type一致
核心代碼
核心代碼2
16集-評論排序功能實現
思路
js的數組有方法,可以進行排序.點擊調用方法
在方法里面進行排序,然后通過 useState里面的方法進行設置更新
工具類 lodash 可以進行排序,生成新的數據不更改老數據
執行 npm i lodash
引入 import _ from ‘lodash’
使用
_.orderBy(commnetList,'like','desc')
_.orderBy(commentList,'times','desc')
17集classnames類名優化控制工具
classnames 一個簡單的js庫,通過條件動態控制class類名顯示
npm i classnames
<span className={className(‘’,{active: type === item.type})}>
第一個參數是動態的類名,第二個是一個對象,key是要顯示的類名,value是控制條件
 ? | DrinkWater（喝水記錄組件）)
