7.React飞行日记
文章平均质量分 65
狄鸠
写给5年后的自己
展开
-
React实现todoList【react的组件通信】
最终效果:代码目录结构github地址:https://github.com/Adermi/-react-todoList原创 2021-04-24 21:50:47 · 157 阅读 · 0 评论 -
React飞行日记(九) - 复合组件交互
-父子组件交互1.状态和方法React中父子组件的交互有两种方式(除去redux)第一种是靠(状态|属性)完成父传子:(父组件把其状态,作为子组件属性传入,父状态改变子组件重渲染)【父->子】子传父:(父组件把其方法,作为子组件属性传入,子组件调用方法影响父组件)【子->父】2.context上下文第二种是靠(状态|上下文context)完成上下文和属性的不同点:父组件定义上下文,所有后代组件都能使用。(属性只停留在父子组件层面)每个后代组件中的上下文都是独立原创 2020-10-11 20:18:07 · 233 阅读 · 0 评论 -
React飞行日记(八) - React钩子函数
-钩子函数钩子函数,也称生命周期函数,是描述一个组件从创建到销毁的全部过程。基于钩子函数,在组件执行的过程中(创建前|创建后|二次渲染前|组件销毁…)可以加入我们自己的逻辑和操作【组件渲染的基本流程触发的钩子】constructor 创建组件(构造函数)componentWillMount 组件第一次渲染前在这个钩子函数中的this.setState会变成同步操作render原创 2020-10-11 20:11:44 · 504 阅读 · 0 评论 -
React飞行日记(一)- 脚手架的基本使用(create-react-app)
基础使用React是FaceBook公司研发的一款JS框架(MVC)【React的脚手架】简介配置webpack是一个比较复杂的工作, 需要自己安装许多的包, 还要写复杂的配置文件, 使用脚手架能帮我们快速的构建一套自动化工程项目结构, 有助于提高开发效率(自动配置开发前所有的依赖和设置)【CREATE-REACT-APP】 的使用安装npm install create-react-app -g // 安装在全局使用create-react-app [项目名称]/原创 2020-06-22 16:54:31 · 233 阅读 · 0 评论 -
React飞行日记(二) -邂逅React
-React渐进式框架:最流行的框架设计思想我们在使用一个框架的时候, 如果只想使用其中几个功能, 但是需要引入一个庞大的框架, 过于臃肿, 这时候渐进式框架的特点就来了特点: 能够把各个功能进行拆分, 让用户自己组合功能, 想要什么功能就拿什么全家桶渐进式框架N多种部分的组合比如Vue全家桶: Vue/Vue-router/vuex/axios(fetch)/vue element(vant)React全家桶: react/react-dom/react-router/axi原创 2020-06-22 16:58:20 · 152 阅读 · 0 评论 -
React飞行日记(三) - JSX语法的渲染流程
Jsx的渲染流程在React.js中, 其为我们提供了一种JSX语法, 能够直接在JS文件中进行虚拟DOM代码的编写, 并在编译后转换成真实DOM渲染到页面中, 那么React是怎么把JSX的虚拟DOM转换成真实的DOM?主要靠两个API : React.createElement | ReactDOM.render实验代码显示效果渲染步骤需要借助babel来帮我们编译JSX语法的代码babel网址用法如下↓↓↓↓↓↓↓↓jsx语法转换成编译后, <div><原创 2020-06-22 17:33:15 · 291 阅读 · 0 评论 -
React飞行日记(四) - 如何编写JSX代码
Jsx语法的编写React的灵魂之一就是这个JSX语法了, JSX就是(JavaScript+XML),他的语法很奇特,也很有趣其中 {} 是JSX语法的核心(“小胡子”),在JSX中用他来向视图中展示数据,用 {} 编写JSX代码的时候需要遵循以下的规则正确写法{} 是 JSX 语法,在 {} 中的内容皆会被识别成 JavaScript 代码若没用 {} 包裹,则标签之间的 会被当成字符串处理{} 中使用有返回值的 js 表达式【如: 三元,立即执行函数,闭包,基本数据类型,数组原创 2020-07-17 01:04:59 · 245 阅读 · 0 评论 -
React飞行日记(五) - 重构React渲染函数React.createElement与ReactDOM.render
为什么在JS文件中用那么几行神奇的代码, 就能够把虚拟DOM转换成真实DOM?并且还实实在在的插入了页面中?为了搞明白这一切, 我自己写了两个方法, 也就是对React.createElementReactDOM.render方法的重构, 来揭露其到底是怎么实现的!方法实现实现ReactDOM.render/** * 简单实现 React.createElement(type, props, ...children) 方法 * 该方法会创建一个虚拟DOM树, 通过ReactDOM.ren原创 2020-06-24 00:55:21 · 967 阅读 · 0 评论 -
React飞行日记(六) - React组件
不管是任何框架, React|Vue|angular也好, 设计之初都是希望我们按照 组件|模块 的方式来构建程序, 也就是把一个程序划分成多个组件, 写好后渲染到页面即可优点:利于多人开发, 每个人只需要管理自己的组件组件能够被重复利用减少代码冗余…-创建组件组件存放位置为 项目根目录/src/component1.函数声明式首先在src/component下创建组件 导航栏组件Header.js编写组件代码import React from原创 2020-06-29 22:44:49 · 179 阅读 · 0 评论 -
React飞行日记(七) - 在React中使用DOM操作
×在React中使用DOM操作React中很少直接用到DOM操作, 因为所有的功能都可以基于数据驱动来完成, DOM是框架帮我们做的事情, 但是也有些喜欢用DOM操作的开发者, 那么看看如何在React中使用DOM操作通过ref进行DOM操作1. refsReact中提供通过操作DOM来实现需求的方式, 那就是refs, it是一个对象, 存储了当前被渲染组件中的非受控组件有两种方法挂载非受控组件ref常规操作 : 挂载到this.refs上特殊操作 : 挂在到this实例上效原创 2020-06-30 21:59:02 · 410 阅读 · 0 评论