React基础知识复盘

最新推荐文章于 2023-06-19 09:40:54 发布

ace_TiAmo

最新推荐文章于 2023-06-19 09:40:54 发布

阅读量1k

点赞数

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/ace15824843202/article/details/124166656

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

git代码地址

jsx语法规则：

1.JS表达式要用单花括号
2.class -> className
3.for -> htmlFor
4.style={{}}
5.定义虚拟DOM不要写引号，用括号，只能有一个根标签
6.标签首字母

（1）若小写字母开头，则改标签转为html同名元素，若html没有该标签元素，则报错、

（2）若大写字母开头，react就去渲染对应的组件，若没有定义该组件，就报错

todoList 案例相关知识点

setState更新状态的2种写法

(1).拆分组件，实现静态组件，注意：className,style的写法
				
(2). 动态初始化列表，如何确定将数据放在那个组件的state中
        --某个组件使用，放在七自身的state中
        --某些组件使用，放在她们公共的父组件state中（官方撑操作为：状态提升）
(3).关于父子通性：
        --【父组件】给【子组件】传递数据：通过prop传递
        --【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数，子把数据当作函数参数传回
(4).注意defaultChecked和checked的区别，类是的还有：defaultValue和value的区别  
(5).状态在哪里：操作状态的方法就写在哪里

路由组件和一般组件的区别

1.写法不同一般组件:
路由组件：
2.存放位置不同：一般组件:components 路由组件：pages
3.接收到的props不同：一般组件：写组件传递什么接收什么路由组件：接收到固定的三个属性 history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: “/about”
search: “”
state: undefined match:
params: {} path: “/about”
url: “/about”

navLink与NavLink封装

1.NavLink可以实现路由链接高亮，通过activeClassName设置样式
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容

Switch的使用

1.通常情况下，path和component是一一对应的关系
2.如果path对应多个组件，匹配到了第一个，也会继续向下匹配，展示多个组件。效率低下
<Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Route path="/aba" component={aba}/> <Route path="/home" component={Test}/>
3.Switch可以提高路由匹配的效率（单一匹配）,匹配到了就不会继续向下匹配

解决多级路径刷新页面样式丢失的问题

例如：

1.public/index.html 中引入样式时不写（./和…/）写/（常用）
2.public/index.html 中引入样式时不写（./和…/）写%PUBLIC_URL%（常用，只能在react脚手架里用）
3.使用hashRouter #后面的都不会带给服务器

Redirect的使用

1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

嵌套路由

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

params参数

路由链接（携带参数）： <Link to={/home/message/detailed/1/你好} >你好
注册路由（声明接收）：
接受参数：const {id,title} = this.props.match.params

search传递参数

路由链接（携带参数）： <Link to={/home/message/detailed?id=1&title=你好} >你好
注册路由（无需声明接收）：
接受参数：const searchParams = this.props.location.search const {id, title} = qs.parse(
searchParams.slice(1))
备注：获取search是urlencoded编码字符串，需要借助querystring解析

state传递参数（常用）

路由链接（携带参数）： <Link to=to={{ pathname: ‘/home/message/detailed’, state: {id: obj.id, title:
obj.title} }} >你好
注册路由（无需声明接收）：
接受参数：const {id,title} = this.props.location.state
备注：刷新也可以保留住参数，参数不会显示在地址栏中

replace跳转模式

默认push路由跳转模式,压栈操作
replace跳转模式是替换的过程不会压栈，没有回退

编程试路由

不用路由组件跳转（Link，NavLink），而是用this.props.history自带的api跳转 ,前进，后退

withRouter的使用

export default withRouter(Header);

withRouter 可以加工一般组件，让其具有路由组件所特有API
withRouter的返回值是一个新组件

BrowserRouter和HashRouter的区别

底层原理不一样

BrowserRouter使用的是H5的history API,不兼容IE9及一下版本。HashRouter使用的是URL的哈希值。
path的表现形式不一样

BrowserRouter的路径中没有#，例如: localhost:3000/home/message/detailed

HashRouter的路径包括#，例如: localhost:3000/#/home/message/detailed
刷新后对路由state参数的影响

(1) BrowserRouter没有任何影响，因为state保存在history对象中

(2) HashRouter刷新后会导致state参数丢失
备注：HashRouter可以用于解决一些路径错误相关的问题

antd的按需引入+自定义主题

1.安装依赖: yarn add react-app-rewired customize-cra babel-plugin-import less less-loader@7.1.0

2.修改package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

3.根目录下创建config-overrides.js

const {override, fixBabelImports,addLessLoader} = require(‘customize-cra’); //按需引入antd的样式文件
module.exports = override(
fixBabelImports(‘import’, { libraryName: ‘antd’, libraryDirectory: ‘es’, style: true, }), //修改主题
这里注意less-loader插件的版本不能过高，太高不支持这种写法 addLessLoader({ lessOptions: { javascriptEnabled:
true,//允许用js修改 modifyVars: {‘@primary-color’: ‘#1DA57A’}, }, }),
);
4.备注：不用在组件里亲自引入样式，即：import ‘antd/dist/antd.css’

求和案例redux精简版

1.在src下创建redux文件夹，里面包括，store.js、count_reducer.js
2.在store.js中（该文件专门用于暴露一个store对象，整个应用只有一个store对象）

  //引入createStore,专门用于创建redux中最为核心的store对象
  import {createStore} from "redux";
  //引入为Count组件服务的reducer
  import countReducer from './count_reducer'

export default createStore(countReducer)

3.count_reducer.js中（该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数）

1）函数接收两个参数：preState，action，返回加工后的状态

2）reducer有两个作用：初始化状态，加工状态

3）reducer被第一次调用时，是store自动触发的,
```
传递的preState是underfined,

传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

注意点：只做单纯的加减操作，条件（异步加还是奇数加）放在组件里判断
```
4)在index.js中检测store中的状态，一旦发生改变重新渲染

        //React.StrictMode 检查代码里不合理的位置
        ReactDOM.render(
        <React.StrictMode>
        <App store={store}/>
        </React.StrictMode>,
        document.getElementById('root')
        );

  })

求和案例redux完整版

新增文件：

1.count_action.js 专门用于创建action的对象
2.constant.js 放置由于编码疏忽写错action中的type

求和案例redux异步action版

1.明确:延迟的动作不想交给组件自身，想交给action
2.何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回
3.具体编码

1)npm install redux-thunk,并配置在store.js

2)创建action的函数不再返回一般对象，而是一个函数，在函数里写异步任务

3）异步任务有结果后，分发给一个同步的action去真正的操作数据
4.备注：异步action不是必须要写的。完全可以自己等待异步任务的结果再去同步action

求和案例react-redux基本使用

1.明确两个概念

1）UI组件：不能使用任何redux的api，只负责页面的呈现、交互等

2）容器组件：负责和redux通信。将结果交给UI组件

2.如何创建一个容器组件–靠react-redux的connent函数

connect(mapStateToProps,mapDispatchToProps)(ui组件）
  -mapStateToProps：映射状态，返回值是一个对象
  -mapDispatchToProps：映射操作状态的方法，返回值是一个对象

3.备注1：容器组件中的store是靠props传进去的，而不是在自身里import引入的

求和案例react-redux优化

1.容器组件和ui组件整合一个文件
2.mapDispatchToProps也可以是一个对象
3.不用在index.js中store.subscript检测store的变化，react-redux帮你做了这一步
4.当存在多个容器组件，可在index.js中引入Provider组件包裹,它负责给每个容器组件传store的

import store from './redux/store'
import {Provider} from "react-redux";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App/>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

5.一个组件要和redux组件"打交道"要经过几步（1）定义好UI组件—不暴露

(2) 引入connect生成一个容器组件，并暴露，写法如下： connect(state=>(
{key:value}),//映射状态 {key:XXXXAction}，//操作状态的方法
)(UI组件)
（3)在UI组件中，通过this.props.xxxxx读取和操作状态

求和案例——react-redux多个组件共享数据

1.定义一个Person组件和Count组件通过redux共享数据
2.为Person组件边界：reducer、action 配置constant常量
3.重点：Person的reducer和Count的Reducer使用combineReducer进行合并,合并后的总状态是一个对象
4.交给store的是总的reducer

求和案例——react-redux开发者工具的使用

1.npm install redux-devtools-extension

2.在store中配置

import {composeWithDevTools} from 'redux-devtools-extension'
export default createStore(combineReducers({count:countReducer,person:personReducer}),composeWithDevTools(applyMiddleware(thunk)))

求和案例——react-redux最终版

1.reducer文件夹下新建一个index.js文件进行整合combineReducers多个组件的reducer，在store中引入
2.命名规范

打包上线

1.npm run build命令打包，会出现一个build文件夹
2.可以自行部署一个node服务器或者借助第三方库serve

1）全局安装 npm i serve -g 2）serve build

扩展内容

setState更新状态的两种写法

1.setState(stateChange,[callback])------对象式setState

 this.setState({count: 99}, () => {
               //回调函数中可以拿到更新后的值
               console.log(this.state.count) // 1
           })

2.setState(updater,[callback])-----函数式setState

  this.setState((state, props) => {
            return {count: state.count + 1}
        }, () => {
            //回调函数中可以拿到更新后的值
            console.log(this.state.count) // 1
        })

总结

（1）对象式setState写法式函数式setState写法的简写方式（语法糖）

（2）使用规则：

I 如果新状态不依赖原状态 ===》使用对象方式

II 如果新状态依赖原状态 ===》使用函数方式

III 如果需要在setState()执行后获取最新的状态数据，要在callback函数中读取（setState是异步的）

路由组件的lazyLoad

1.引入import React, {Component, lazy, Suspense} from ‘react’;
2.路由组件引入方式

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

3.通过包裹路由, 通过fallback来加载当路由组件没有加载完成显示的一个组件
```
 <Suspense fallback={<Loading/>}>
     {/*注册路由*/}
      <Route path="/about" component={About}/>
      <Route path="/home" component={Home}/>
 </Suspense>
```
注意： Loading组件要提前加载好，所以import Loading from "./Loading"引入

Hooks

1.React Hooks/Hooks是React16.8之后增加的新语法，可以让我们在函数组件中使用state以及其他的React特性
2.三个常用的Hook :

(1)State Hook：React.useState()

(2)Effect Hook: React.usrEffect()

(3)Ref Hook: React.useRef()

State Hook

1.语法: const [xxx,setXxx] = React.useState(initValue)
2.setXxx()两种写法
1. setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
2. setXxx(value=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

function StateHook() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('张三')

    function handleAdd() {
        setCount(count => {
            return count + 1
        })
    }

    function handleChange() {
        setName(() => '李四')
    }

    return (
        <div>
            <h3>当前的和为:{count}</h3>
            <button onClick={handleAdd}>点我+1</button>
            <h3>我的名字是:{name}</h3>
            <button onClick={handleChange}>改变我的名字</button>
        </div>
    )
}

export default StateHook;

Effect Hook

1 . effect Hook 让你能在函数组件中使用到执行副作用操作（类似类组件中的生命周期钩子）
2 . react中的副作用操作:发送ajax，设置订阅/启动定时器，手动改写真实的dom
3 .

 React.useEffect(() => {
        //在此可以执行任何副作用操作
        return () => {
           //在这做一些收尾工作，比如清除定时器/取消订阅等
           //类似于类组件的componentWillUnmount
        }
    }, [stateValue])
    //如果指定[],不监听任何，只会在第一次render调用一次（类似于类组件的componentDidMount）
    //[要监听的值,要监听的值,...]，值的改变都会调用，（类似于类组件的componentDidUpdate）

Ref Hook

使用Ref Hook 可以让函数组件像类组件使用标签

const refName = React.useRef()

function XXX() {
   alert( refName.current.value)
   
   }

<input type="text" ref={refName} />

Fragment使用

1.相当于vue中的template标签，在DoM树中不会显示
2.简写方式<></>
3.简写方式的标签上不能有任何属性，Fragment上只能有一个key属性

import React, {Component,Fragment} from 'react';

 <Fragment >
    <input type="text"/>
     <input type="text"/>
 </Fragment>

context使用–一种组件间的通信方式，常用于【祖组件】于【后代组件】间通信

1.创建Context容器对象

//要创建在组件都共享的空间里
const MyContext = React.createContext()

2.用MyContext.Provider包裹子组件，value给后代组件传值

<MyContext.Provider value={{name, age}}>
                  子组件
 </MyContext.Provider>

3.后代读取组件

第一种方式：仅试用类组件

static contextType = MyContext //声明接收值
this.context //读取context值使用

*第二种方式：函数组件和类组件都能用

<MyContext.Consumer value={{name, age}}>
{
  value=>( // value是context中的value数据
    要显示的内容
  )
}
</MyContext.Consumer>

注意：在应用开发中一般不用context，一般都用它的封装react插件

组件优化

问题：setState()即使不改变状态数据，组件也会重新render，子组件没用到父组件的state也会render–效率低
效率高的做法：只有单组件的state或props数据改变才重新render()
原因：Component中shouldComponentUpdate（）总是返回true
解决：：
- 1.重写shouldComponentUpdate（）方法，比较新旧state或props数据，如果有变化才返回true，如果没有返回false
- 2.使用PureComponent(底层重写shouldComponentUpdate)–常用
  
  注意：: 只是进行state和props数据的浅比较，如果只是数据对象的内部数据变了，返回false,不要直接修改state数据，而是产生新数据

renderProp—插槽

1.render props:通过组件标签属性传入结构，一般用render函数属性

<A render={(value) => <B value={value}/>}/>
A组件：{this.props.render(A组件内部数据)}
B组件：<span>我从A组件拿到的{this.props.value}</span>

2.children props --B组件拿不到A组件内部的state数据

<A> <B/> </A>
A组件：{this.props.childern}

错误边界

1.错误边界（Error boundary):用来捕获后代组件的错误，渲染出备用页面
2.特点：只能用来捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件，定时器中产生的错误
3.使用方法 getDerivedStateFromError配合componentDidCatch

//当子组件出现报错时，会触发调用，并携带错误信息
    //state中的某些值永远取决于error
    static getDerivedStateFromError(error) {
        console.log('----error', error)
        return {hasError: error}
    }
    componentDidCatch(error, errorInfo) {
        console.log('此处统计错误，反馈给服务器，用户通知编码人员进行bug解决',error,errorInfo)
    }

##组件通信方式

1.通信方式

（1）props：children prop 和render prop（插槽）

（2）消息订阅-发布：pubs-sub、event等

（3）集中式管理：redux dev等

（4）conText:生产者-消费者模式
2.如何选择搭配

（1）父子组件：props

（2）兄弟组件：消息订阅，集中式管理

（3）祖孙组件：消息订阅发布，集中式管理，context（开发用的少，插件用的多）