![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 67
做一个优秀的小前端
长风破浪会有时,直挂云帆济沧海。
展开
-
10-react-redux
概念redux是一个专门做状态管理的js库(不是react插件库)作用:集中式管理react应用中多个组件共享的状态适用情况某个组件的状态需要上其他组件可以随时拿到 一个组件要改变另一个组件的状态 能不用就不用(个人觉得消息订阅发布就挺好的)原理图Action Creators主要作用是封装对象,将组件要做的动作与数据封装为一个对象交给store处理type:标识属性,值为字符串且唯一 标识组件要做什么data:数值属性,值类型任意 ...原创 2021-05-14 21:23:51 · 94 阅读 · 0 评论 -
9-react-路由
SPA:单页面web应用(single page web application)整个应用只有一个完整的页面 点击页面中的链接不会刷新页面,只会做页面的局部刷新 数据通过Ajax请求获取,并在前端异步展现路由什么是路由 一个路由 就是一个映射关系(key:value) key为路径,value可能是function或component 路由的分类1.后端路由value是function,用来处理客户端提交的请求 注册路由:router.get(path,func.原创 2021-05-13 22:16:10 · 156 阅读 · 0 评论 -
8-react-组件通信
参考:https://blog.csdn.net/l1336037686/article/details/85505473组件之间通信的方式:1.props公共的数据放在父组件上,特有的数据放在自己组件内部。通过props可以传递一般数据和函数数据,只能一层层传递一般数据->父组件传递给子组件,子组件读取函数数据->父组件传递给子组件,子组件调用函数如下边的代码段,由于数据在父组件中,如果子组件需要使用到这些数据,就要父组件在标签中传递过去,如果子组件要对数据进行操作原创 2021-05-13 16:41:55 · 89 阅读 · 0 评论 -
7-react-生命周期钩子(新)
官方文档讲解生命周期:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/生命周期钩子生命周期回调函数<=>生命周期钩子函数<=>生命周期函数<=>生命周期钩子由Windows在某个时机调用的函数,我们可以重写钩子中的方法,以达到在这个时机做什么事情的目的,我们自己是无法调用这些钩子的常用的钩子constructor(props)构造器钩子,有以下两...原创 2021-05-13 15:22:51 · 140 阅读 · 0 评论 -
6-react-Diffing算法
如下图所示,state状态一直在改变,每次改变都会调用render进行重绘,可是发现每次重绘我们输入到input中的文字并没有改变,说明render只重绘了span中的显示时间的部分,其余没有发生改变的元素并没有进行重绘。这就是react的diffing算法。class Time extends React.Component { state = {date: new Date()} componentDidMount () { setInterval(() => { this.原创 2021-05-13 12:02:53 · 158 阅读 · 0 评论 -
5-react-受控组件非受控组件
非受控组件现取现用,不会存储到state中//创建组件class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`) } render(){ return(原创 2021-05-13 11:32:37 · 180 阅读 · 0 评论 -
4-react-三大属性
statestate用来表示组件的状态,当状态发生改变时,调用render重新渲染页面改变状态使用setState({name:value}),不可直接改变状态//1.创建组件class Weather extends React.Component{ //初始化状态 state = {isHot:false,wind:'微风'} render(){ const {isHot,wind} = this.state return <h1 onClick={this.cha原创 2021-05-13 11:20:50 · 112 阅读 · 0 评论 -
3-react-组件类型
函数式组件现在开始渐渐转换为函数式组件了,要好好学函数式组件 //1.创建函数式组件 function MyComponent(){ return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到页面 ReactDOM.render(<MyComponent/>,document.getElementById('test')) /* 执行了ReactDOM.render(<.原创 2021-05-13 10:12:36 · 103 阅读 · 0 评论 -
2-react-虚拟DOM
1. 什么是虚拟DOM虚拟DOM是对真实DOM的抽象,本质上是JavaScript中Object类型的对象。 虚拟DOM是轻量级的真实DOM,因为它只是在JavaScript内部使用,无需真实DOM那么多的属性。 虚拟DOM最终会被React转化为真实DOM渲染到页面上。2. 为什么要使用虚拟DOM效率高。频繁变动DOM会导致浏览器不断对页面进行重绘重排,对性能有很大的影响,因此我们需要使用虚拟DOM尽可能一次性将差异更新到DOM中。 不直接操作真实DOM。前端要求我们尽可能手动操作DOM.原创 2021-05-13 10:05:44 · 156 阅读 · 0 评论 -
1-React-特点
1. 声明式编程命令式编程:一步一步指导计算机应该怎么做,在完成之前,计算机并不知道我要做什么,只是按照我给的要求一步步执行代码。声明式编程:我只是告诉计算机要做什么,并不告诉它要怎么做,比如下边的代码,我只是告诉它你执行这个reduce函数就好了,具体怎么执行我不知道。声明式编程就是拿来主义,拿已经封装好的纯函数实现,实际上的执行步骤不比命令式编程少,但是纯函数具有极高的稳定性,并且减少了程序员的负担。命令式编程---------------var array = [1,2,3,4,5]原创 2021-05-13 09:44:28 · 149 阅读 · 0 评论