react的笔记整理

逃离我推掉我的手 2023-08-17 16:36 73阅读 0赞

**生命周期**

React的生命中欧琪分上状态分别是mount  update  unmount

三个状态中有五个钩子函数

componentDidMount()  组件加载到页面以后  往往是ajax

componentDidUpadte() 组件更新完成以后

**　脚手架**

**　　![1705898-20190923210700788-1673524620.png][]**

**　　react文件的内容**

App.css 是所有组件的样式

Index.css 是整个网页全局样式

App.js  是最大的那个组件

Index.js就是出口文件

**React中定义组件的方法**

1.react.createClass()

定义组件的method中的this指向组件本身

![1705898-20190923211010408-798141875.png][]

2.构造函数

定义的组件是无状态的，没有state状态，没有生命周期，不能访问this。就是一个纯粹的静态页面。

![1705898-20190923211028192-1589084666.png][]

**3.class**

**![1705898-20190923211057942-1899013184.png][]**

1.class中的事件函数中的this不是指向组件本身是null。**　　**

2.通过class创建的组件的成员函数需要手动绑定

3.在class定义组件中添加state

React中的组件嵌套

组件嵌套 ：将子组件以标签的形式写在父组件的模板中

**组件之间的通信**

**　　父传子**

通过props传递给子组件

将父组件中的数据，绑定在子组件的标签上，充当标签的属性值，子组件中通过props接收

**子传父**

通过函数层层传递

React路由

React推出了两个路由的版本，一个是react-router另一个是react-router-dom后者比谴责个多一个组件 叫link组件就是a

1.  1.  第一步  npm i react-router-dom -S
    2.  第二步 配置路由

引入router组件

import \{HashRouter,Switch,Route\} from "react-router-dom"

将这个组件一标签的像是写在APP组件的模板中

转载于:https://www.cnblogs.com/gaoyan11/p/11574899.html

[1705898-20190923210700788-1673524620.png]: /images/20230810/2f31d8640cfd471c8d9580f8b683c17d.png
[1705898-20190923211010408-798141875.png]: /images/20230810/eb610724658e44ea8c5f8f5447657ef5.png
[1705898-20190923211028192-1589084666.png]: /images/20230810/aaf4c90eac6047b79e6f2a91c6f360b9.png
[1705898-20190923211057942-1899013184.png]: /images/20230810/d0eb6f8e3e0743f796e027eaa78845d9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 react的笔记整理

　　生命周期　　React的生命中欧琪分上状态分别是mount update unmount 　　三个状态中有五个钩子函数　　componentDidMount(

逃离我推掉我的手/ 2023年08月17日 16:36/ 0 赞/ 74 阅读

相关 React笔记

文章目录 React笔记第1章：React入门 1.1 React简介 1.1.1 官网

Bertha 。/ 2022年12月29日 09:59/ 0 赞/ 206 阅读

相关 react笔记

react笔记 state和props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什

亦凉/ 2022年11月20日 09:49/ 0 赞/ 262 阅读

相关 React Router 全面整理

> React router 已经到了 V5 版本，增加了基于 React Hooks 的一些 API，比如 useParams、useHistory 等等，让我们可以在组件中

淩亂°似流年/ 2022年11月18日 10:57/ 0 赞/ 84 阅读

相关 react报错整理

1. Invariant Violation: Maximum update depth exceeded. 原因：分析： > onCancel=\{set

我就是我/ 2022年10月15日 06:56/ 0 赞/ 169 阅读

相关前辈整理的笔记

修订： 2013/10/19 ：推荐一位前辈整理的学习笔记：[https://github.com/qyuhen/book][https_github.com_qyuhen_

╰+攻爆jí腚メ/ 2022年09月26日 11:56/ 0 赞/ 135 阅读

相关 React 笔记

1、ReactDOM.render() //React最基本的方法，用于将模板转为HTML，并插入制定的DOM节点。 2、JSX语法 //允许HTML与Java

青旅半醒/ 2022年06月07日 12:18/ 0 赞/ 148 阅读

相关 react笔记

webpack常用loader （经常更新，请参考最新版配置） \\react \\ react-dom babelify babel-preset-react babel

雨点打透心脏的1/2处/ 2022年05月30日 09:18/ 0 赞/ 184 阅读

相关 react笔记

1、使用类时用：className 2、label标签属性的for改用htmlfor 3、vScode快速生成代码快捷件的插件：Simple React Snippets

谁借莪１个温暖的怀抱￠/ 2021年12月20日 11:25/ 0 赞/ 273 阅读

相关 React (3) react 笔记

1. react 特点 1. 声名式开发 (可以减少大量操作dom) 2. 可以与其他框架并存 (react 只挂载一个元素上, 其他框架挂用另外元素就行了) 3.

傷城~/ 2021年09月17日 01:36/ 0 赞/ 376 阅读