React基础及React项目
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包来读取到路由信息
在react项目中配置react-router-dom的方法和示例
https://github.com/supasate/connected-react-router
配置路由规则的权限
import React from "react"
import { HashRouter, Route, Switch } from "react-router-dom"
import PrivateRoute from "./components/admin/PrivateRoute"
import AdminRoute from "./components/admin/AdminRoute"
const Routes = () => {
return (
<HashRouter>
<Switch>
<PrivateRoute path="/user/dashboard" component={Dashboard} />
<AdminRoute path="/admin/orders" component={Orders} />
<Route path="/product/:productId" component={Product} />
</Switch>
</HashRouter>
)
}
export default Routes
const AdminRoute = ({
component,
...rest
}) => {
return (
<Route
{...rest}
render={props => {
const auth = isAuth()
if (auth) {
const {
user: { role }
} = auth as Jwt
if (role === 1) return <Component {...props} />
}
return <Redirect to="/signin" />
}}
/>
)
}
路由的重定向
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在其中的回调函数中更改视图
reducx在react项目中的使用
https://react-redux.js.org/tutorials/quick-start
read data from the store with useSelector, and dispatch actions using useDispatch.
import { useDispatch, useSelector } from "react-redux"
const AddProduct = () => {
const dispatch = useDispatch()
const category = useSelector<AppState, CategoryState>(
state => state.category
)//TS<>中前面是回调函数参数的类型，后面是回调函数返回值的类型
useEffect(() => {
dispatch({type: GET_CATEGORY})//触发action
}, [])
return (
)
}
connect函数
- connect 方法会帮助我们订阅store 当store中的状态发生更改的时候 会帮助我们重新渲染组件
- connect 方法可以让我们获取store中的状态 将状态通过组件的props属性映射给组件
- connect 方法可以让我们获取 dispatch 方法
将状态和dispatch传给组件中的props属性
import { connect } from 'react-redux';
// bindActionCreators 用于整合actions
import { bindActionCreators } from 'redux';
const mapStateToProps = state => ({
count: state.counter.count
});
const mapDispatchToProps = dispatch => bindActionCreators(couterActions, dispatch)
const mapDispatchToProps = (dispatch) => {
return {
// dispatching plain actions
increment: (payload) => dispatch({ type: 'INCREMENT',payload }),
decrement: (payload) => dispatch({ type: 'DECREMENT',payload }),
reset: (payload) => dispatch({ type: 'RESET',payload }),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
CreateStore时添加reducx-saga让其执行异步操作
import RootReducer from "./reducers/root.reducer";
import createSagaMidddleware from 'redux-saga';
import rootSaga from './sagas/root.saga';
// 创建 sagaMiddleware
const sagaMiddleware = createSagaMidddleware();
export const store = createStore(RootReducer, applyMiddleware(sagaMiddleware));
// 启动 counterSaga
sagaMiddleware.run(rootSaga)
saga的使用
import { takeEvery, put, delay } from 'redux-saga/effects';
import { increment } from '../actions/counter.actions';
import { INCREMENT_ASYNC } from '../const/counter.const';
// takeEvery 接收 action
// put 触发 action
function* increment_async_fn (action) {
yield delay(2000);
yield put(increment(action.payload))
}
export default function* counterSaga () {
// 接收action
yield takeEvery(INCREMENT_ASYNC, increment_async_fn)
}
创建store时用applyMiddleware()来传递中间件，写中间件函数
export default store => next => action => {
console.log(store);
console.log(action);
next(action);
}
react子组件中的类型校验
import PropTypes from 'prop-types'
SearchFile.propTypes = {
title: PropTypes.string,
onSearch: PropTypes.func.isRequired
}
SearchFile.defaultProps = {
title: '文档列表'
}
父组件可以向子组件传递一个函数，子组件在特定条件下触发函数传入值，父组件就可接收到这个值
