![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React快速入门
文章平均质量分 75
傅里叶级数ff
广工本科
展开
-
15_Hooks
React函数式组件核心——HooksHooks本质上就是一类特殊的函数,它们可以为你的函数型组件(function component)注入一些特殊的功能。useState未使用useState的类式组件的案例class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { re原创 2022-05-13 12:50:21 · 70 阅读 · 0 评论 -
15_Hooks
React函数式组件核心——HooksHooks本质上就是一类特殊的函数,它们可以为你的函数型组件(function component)注入一些特殊的功能。useState未使用useState的类式组件的案例class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { re原创 2022-05-13 07:30:00 · 129 阅读 · 0 评论 -
14_扩展
React扩展setState对象式 setState首先在我们以前的认知中,setState 是用来更新状态的,我们一般给它传递一个对象,就像这样this.setState({ count: count + 1})这样每次更新都会让 count 的值加 1。这也是我们最常做的东西那我们需要在控制台输出,要如何实现呢?我们会考虑在 setState 更新之后 log 一下add = () => { const { count } = this.state // co原创 2022-05-13 03:30:00 · 63 阅读 · 0 评论 -
13_ReactRouter@6
React Router 6React Router 以三个不同的包发布到npm 上,它们分别为:react-router:路由的核心库,提供了很多的:组件、钩子。react-router-dom:包含react-router所有内容,并添加一些专门用于DOM的组件,例如等。react-router-native:包括react-router所有内容,并添加一些专门用于ReactNative的API,例如如: 等。与React Router 5.x版本相比,改变了什么?原创 2022-05-13 01:00:00 · 531 阅读 · 0 评论 -
12_react-redux
react-redux在前面我们学习了 Redux ,我们在写案例的时候,也发现了它存在着一些问题,例如组件无法状态无法公用,每一个状态组件都需要通过订阅来监视,状态更新会影响到全部组件更新,面对着这些问题,React 官方在 redux 基础上提出了 React-Redux 库容器组件和 UI 组件所有的 UI 组件都需要有一个容器组件包裹容器组件来负责和 Redux 打交道,可以随意使用 Redux 的APIUI 组件无任何 Redux API容器组件用于处理逻辑,UI 组件只会负责渲染和原创 2022-05-13 00:45:00 · 122 阅读 · 0 评论 -
11_redux
Redux 在这之前我们对于状态的管理,都是通过 state 来实现的,比如,我们在给兄弟组件传递数据时,需要先将数据传递给父组件,再由父组件转发 给它的子组件。这个过程十分的复杂,后来我们又学习了消息的发布订阅,我们通过 pubsub 库,实现了消息的转发,直接将数据发布,由兄弟组件订阅,实现了兄弟组件间的数据传递。但是,随着我们的需求不断地提升,我们需要进行更加复杂的数据传递,更多层次的数据交换。因此我们为何不可以将所有的数据交给一个中转站,这个中转站独立于所有的组件之外,由这个中转站来进行数据的分原创 2022-05-12 20:28:35 · 72 阅读 · 0 评论 -
10_antd库的基本介绍
antd介绍在我们学习JavaScript 的时候,我们学习了一个 bootstrap 的组件库。可以让我们快速开发,但是我们现在学习了 React ,一种组件化编程方式,很少说会去贴大量的 HTML 代码,再配一下 CSS,JS。我们也有一些现成的组件库可以使用,我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分的快速,方便和整洁。我们这里学习的是 Ant-design (应该是这样),它有很多的组件供我们使用附上antd官网地址https://ant.design/docs/r原创 2022-05-11 15:58:19 · 1851 阅读 · 0 评论 -
09_React路由
React路由路由是根据不同的 URL 地址展示不同的内容或页面在 SPA 应用中,大部分页面结果不改变,只改变部分内容的使用优点:用户体验好,不需要每次都从服务器全部获取整个 HTML,快速展现给用户缺点:SPA 无法记住之前页面滚动的位置,再次回到页面时无法记住滚动的位置使用浏览器的前进和后退键会重新请求,没有合理利用缓存路由的原理前端路由的主要依靠的时 history ,也就是浏览器的历史记录history 是 BOM 对象下的一个属性,在 H5 中新增了一些操作 h原创 2022-05-11 15:57:55 · 792 阅读 · 0 评论 -
08_React组件通信
React组件通信React的组件化带来了很多的好处:可以增强代码模块的复用性。同时也可以提高开发效率,后期便于项目版本升级和维护。那么组件化之后,组件间的通信自然是必备可少的了。本节将会介绍React中几种常用的组件通信方法父组件向子组件传值在父组件中给子组件上 添加属性项 content={ item } ,属性值 item,为要传递的数值。在子组件中 通过 { this.props.content } 来 接收 父子间传过来的值。子组件向父组件传值在父组件中给子组件上添加 属原创 2022-05-11 15:57:15 · 74 阅读 · 0 评论 -
07_todoList小练习
TodoList小练习todoList案例相关知识点拆分组件、实现静态组件,注意: className、 style的写润Ⅰ动态初始化列表,如何确定将数据放在哪个组件的state中?某个组件使用:放在自身的state中某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升>关于父子之间通信:【父组件】给【子组件】传递数据:通过props传递【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数注意defaultch原创 2022-05-11 15:56:48 · 154 阅读 · 0 评论 -
06_React配置代理proxy(实现跨域请求)
React配置代理proxy(实现跨域请求)方法一:直接在package.json中设置proxy属性我们可以在package.json中直接添加这样的字段"proxy": "http://172.16.136.249:8080"这和Vue的配置有点不同,他好像不太需要过多的设置,而是简简单单的一个字符串即可。但他有个大缺点——不能配置多个代理。下面的方法二就是解决这个问题的,也是比较推荐使用的方法二:建立setupProxy.js,注意必须是这个文件名我们使用这个方法时,需要在项目中安装m原创 2022-05-11 15:56:02 · 1317 阅读 · 0 评论 -
05_创建React的配置文件
脚手架创建的React项目添加webpack.config.js添加config文件create-react-app生成项目后,默认的项目目录是这样的:![在这里插入图片描述](https://img-blog.csdnimg.cn/386fd4adad374590ac17166b80be797c.png#pic没有配置文件的目录,脚手架工具给我们提供的生成配置文件的命令在package.json中,如下:在我们需要配置文件的时候,只需要运行这行脚本就可以了:# 使用npmnpm run e原创 2022-05-11 15:53:58 · 1119 阅读 · 0 评论 -
04_初始React脚手架
初始React脚手架安装React脚手架安装React的脚手架,前提是确保安装了npm和node,但版本不要太古老哦,然后打开 cmd 命令行工具,全局安装 create-react-appnpm i create-react-app -g然后可以新建一个文件夹用于存放项目在当前的文件夹下执行create-react-app study快速搭建项目再在生成好的 study 文件夹中执行启动项目接下来我们看看这些文件都有什么作用脚手架项目结构hello-react├─ .git原创 2022-05-11 15:47:19 · 89 阅读 · 0 评论 -
03_生命周期LifeCycle
React生命周期LifeCycleReact 生命周期主要包括三个阶段:初始化阶段,更新阶段,销毁阶段初始化阶段执行顺序 constructor -> getDerivedStateFromProps 或者 componentWillMount -> render -> componentDidMountconstructor执行constructor 在组件初始化的时候只会执行一次通常它用于做这两件事初始化函数内部 state绑定函数constructor(pr原创 2022-05-11 15:46:57 · 66 阅读 · 0 评论 -
02_React的组件
当应用是以多组件的方式实现,这个应用就是一个组件化的应用< />render()原创 2022-05-11 15:46:09 · 178 阅读 · 0 评论 -
01_认识React和JSX
React是什么 && JSX语法React简介什么是 React ?React 是一个用于构建用户界面的 JavaScript 库。是一个将数据渲染为 HTML 视图的开源 JS 库它遵循基于组件的方法,有助于构建可重用的 UI 组件它用于开发复杂的交互式的 web 和移动 UIReact 有什么特点?使用虚拟 DOM 而不是真正的 DOM它可以用服务器渲染它遵循单向数据流或数据绑定高效声明式编码,组件化编码React 的一些主要优点?它提原创 2022-05-11 15:45:35 · 50 阅读 · 0 评论