JSX
在 React 中使用 JSX 語法(JavaScript擴充套件)描述使用者介面，在 React 程式碼執行之前，Babel 會將 JSX 語法轉換為標準的 JavaScript API。JSX 語法就是一種語法糖。讓開發人員舒服
JSX不同於vue模板的
屬性值為JavaScript表示式，屬性值外面加大括號。
const element = <img src={user.avatarUrl} />;// 注意大括號外面不能加引號，JSX 會將引號當中的內容識別為字串而不是表示式
為 JSX 標記新增類名需要使用 className
自動展開陣列，迴圈遍歷展示用map
類元件中的ref屬性
使用React中的React.createRef()建立ref例項
class Input extends Component {
constructor() {
super()
this.inputRef = React.createRef()
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={() => console.log(this.inputRef.current)}> button </button>
</div>
)
}
}
類元件 函式元件以及props屬性
import React, { Component } from 'react';
class App extends Component {
static defaultProps = {}//設定props的預設值
render () {
return <div><h4>年齡：{this.props.age}</h4></div>
}
}
函式元件
const Person = props => {
return (
<div>
<h3>姓名：{props.name}</h3>
<h4>年齡：{props.age}</h4>
</div>
);
}
Person.defaultProps = {
name: "secondary",
age: "11"
};
props中資料不能被修改，單向資料流
透過 props.children 屬性可以獲取到在呼叫元件時填充到元件標籤內部的內容
元件狀態和雙向資料繫結
類元件如下,在父元件中設定state，定義更改狀態值的方法，透過this.setState更改元件狀態,給子元件傳遞狀態值和更改狀態值的方法，子元件的值繫結上父元件傳遞來的狀態，並在值更新時呼叫父元件傳遞過來的更改狀態值的方法
class App extends Component {
constructor () {
this.state = {
name: "張三"
}
this.nameChanged = this.nameChanged.bind(this)
}
nameChanged (event) {
this.setState({name: event.target.value});
}
render() {
return (
<div>
<div>{this.state.name}</div>
<Person name={this.state.name} changed={this.nameChanged}/>
</div>
)
}
}
const Person = props => {
return <input type="text" value={props.name} onChange={props.changed}/>;
}
函式元件透過useState解構出狀態值和更改狀態值的方法const [skip, setSkip] = useState<number>(0),原理與上述同
類元件的生命週期
- constructor()在元件被建立時呼叫。
- componentDidMount() 鉤子在元件輸出被渲染到 DOM 之後執行。
- componentWillUnmount() 在元件解除安裝及銷燬之前直接呼叫。
context的使用
Context多個元件之間共享狀態,跨層級的傳遞資料
使用 React.createContext() 建立一個新的 Context 物件。
const MyContext = React.createContext();
Context.Provider
Context.Provider 是一個元件，用於接收一個 value prop，該 value prop 將被傳遞給下層的元件。
<MyContext.Provider value={/* some value */}>
{/* 子元件 */}
</MyContext.Provider>
Context.Consumer
Context.Consumer 是一個元件，用於訂閱 Context 的變化。這個元件接收一個函式作為子元件，這個函式接收當前的 context 值作為引數。
<MyContext.Consumer>
{value => /* 使用 value */}
</MyContext.Consumer>
useContext Hook
useContext 是一個 React Hook，用於在函式元件中訂閱 Context 的變化。
const value = useContext(MyContext);
路由
npm install react-router-dom
react-router-dom@5版本的基本使用
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Index() {
return <div>首頁</div>;
}
function News() {
return <div>新聞</div>;
}
function App() {
return (
<Router>
<div>
<Link to="/index">首頁</Link>
<Link to={`/news?id=${item.id}`}>新聞</Link>
</div>
<div>
<Route path="/index" component={Index}/>
<Route path="/news/:id" component={News}/>
</div>
</Router>
);
}
使用url包來讀取到路由資訊
路由的重定向
import { Redirect } from 'react-router-dom';
class Login extends Component {
render() {
if (this.state.isLogin) {
return <Redirect to="/"/>
}
}
}
React Hooks對函式型元件進行增強
- useState() 獲取設定State的狀態值方法和state . 引數可以是⼀個函式, 函式返回什麼, 初始狀態就是什麼, 函式只會被調⽤⼀次, ⽤在初始值是動態值的情況 設定狀態值⽅法的⽅法是非同步的
- useReducer 另一種讓函式元件儲存狀態的方式
- useContext() 跨階級獲取元件值
- useEffect()讓函式元件獲取處理副作用的能力，類似生命週期函式
useEffect(() => {}) => componentDidMount, componentDidUpdate(在元件完成更新後立即呼叫。在初始化時不會被呼叫。 當state或者props改變時觸發)
useEffect(() => {}, []) => componentDidMount 在DOM渲染完成時執行，只會執行一次 ,[]中有狀態值的話在狀態值變化的時候呼叫
useEffect(() => () => {}) => componentWillUnMount 在{}寫的js在元件解除安裝時執行
useEffect中的引數函式不能是非同步函式，如果裡面要有非同步函式需要加函式自執行
- useMemo類似於計算屬性
- memo 方法包裹函式元件使其類似於函式的純元件（props和state不變化就不會重新渲染，props資料深層會有問題，謹慎使用）
- useCallback的引數陣列中的值發生變化時讓只依賴於其值的元件渲染，並不會讓全部元件渲染，提高效能。
- useRef()函式獲取元件例項
- 自定義Hook函式 ToDo
react-router-dom 路由提供的鉤⼦函式
React+redux專案
redux用法
redux的使用步驟
<script>
// 3. 儲存預設狀態
var initialState = {
count: 0
}
// 2. 建立 reducer 函式
function reducer (state = initialState, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1}
default:
return state;
}
}
// 1. 建立 store 物件
var store = Redux.createStore(reducer);
// 4. 定義 action
var increment = { type: 'increment' };
var decrement = { type: 'decrement' };
// 5. 獲取按鈕 給按鈕新增點選事件
document.getElementById('plus').onclick = function () {
// 6. 觸發action
store.dispatch(increment);
}
document.getElementById('minus').onclick = function () {
// 6. 觸發action
store.dispatch(decrement);
}
// 7. 訂閱 store
store.subscribe(() => {
// 獲取store物件中儲存的狀態
// console.log(store.getState());
document.getElementById('count').innerHTML = store.getState().count;
})
</script>
按鈕點選之後觸發action被reducer接收到然後根據action中的type型別更改了state，更改state之後觸發subscribe在其中的回撥函式中更改檢視