/*lemon*/-CSDN博客

原创 React系列-初始化React脚手架

xxx脚手架：用来帮助程序员快速创建一个基于xx库的模板项目包含了所有需要的配置（语法检查，jsx编译，devServer）下载好了所有相关的依赖项目的整体技术架构为：react+webpack+es6+eslint创建步骤：全局安装：npm install -g create-react-app切换到想创建项目的目录，使用命令：create-react-app hello-reactyarn start 启动服务yarn build 打包yarn test 测试

2021-08-24 12:02:06 136

原创 React系列-总结生命周期（新）

初始化阶段1. constructor()2. getDerivedStateFromProps3. render()4. componentDidMount()更新1. getDerivedStateFromProps2. shouldComponentUpdate()3. render()4. getSnapshotBeforeUpdate()5. componentDidUpdate()卸载组件1. componentWillUnmount()...

2021-08-24 11:42:26 111

原创 React系列-对比新旧生命周期

新生命周期中需要加UNSAFE_前缀（即将要废弃）的有：componentWillMount()componentWillReceiveProps()componentWillUpdate()提出2个新钩子：getDerivedStateFromProps()getSnapshotBeforeUpdate()//state的值在任何时候都取决于props,那么可以使用getDerivedStateFromPropsgetDerivedStateFromProps(){ //直译：从p

2021-08-24 09:55:38 138

原创前端常用网址总结

bootCDN–js依赖包下载

2021-08-18 17:53:12 69

原创 React系列-总结生命周期（旧）

初始化阶段：由ReactDOM.render()触发–初次渲染1. constructor()2. componentWillMount()3. render()4. componentDidMount()–常用，一般在这个钩子中做一些初始化的事，例如开启定时器，发送网络请求，订阅消息更新阶段：由组件内部this.setState()或父组件render()触发1. shouldComponentUpdate()2. componentWillUpdate()3. render()–必须.

2021-08-18 17:51:01 55

原创 React系列-事件处理

通过onXxx属性指定事件处理函数（注意大小写）React使用的自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性React中的事件是通过事件委托的方式处理的（委托给最外层的元素）——为了高效通过event.target得到发生事件的DOM元素对象，也就是发生事件的元素正好是要操作的元素，可以不使用ref——勿过度使用Ref收集表单数据非受控组件：现用现取class Login extends React.component{ handleSubmit=e=&g.

2021-07-20 18:09:47 61

原创 React系列-组件三大属性（ref）

字符串形式的refclass Index extends React.component{ showData=()=>{ const {input1}=this.refs; alert(input1.value) } //debbuger; 可以打断点 render(){ return ( <div> <input ref="input1" typ

2021-07-20 18:06:35 181

原创 React系列-组件三大属性（props）

props的基本使用class Person extends React.component{ render(){ const {name,age,sex}=this.props; return ( <div> <ul> <li>姓名：{name}</li> <li>性别：{sex}&lt

2021-07-20 18:03:08 83

原创 React系列-组件实例的三大属性（state）

对State的理解一个组件的显示形态可以由内部数据状态和外部参数所决定，外部参数也就是props，而内部数据状态就是state。事件绑定事件名称以及调用方式的变化：onclick -> onClickonblur -> onBluronClick={demo()} //错误，因为这是直接调用语句，只是把demo()的返回值复制给了onClickonClick={demo} //正确，这样是属于指定函数名称，在事件发生时再去调用函数严格模式下，自定义函数中的this为u

2021-07-08 16:18:26 84

原创 React系列-类式组件

注意：在class的{ }区间内，只能写构造器、静态方法、静态属性和实例方法class关键字还是用原来的配方实现的，所以我们把class关键字称作语法糖class-使用extends实现子类继承父类//直接把父类看成原型对象class Person{ constructor(name,age){ this.name; this.age; }}//class类中，使用extends实现子类继承父类class Chinese extends Person{}...

2021-07-06 16:07:34 82

原创 React系列-类的基本知识以及注意点

ES6中class关键字，是实现面向对象编程的新形式function Person(name,age){ this.name=name; this.age=age;}const p1=new Person('王多多'，18);

2021-07-02 11:37:23 192

原创 React系列-配置webpack设置根目录

modules.exports={ resolve:{ alias:{ '@':path.join(__dirname,'./src') //path.join(__dirname表示项目根目录，这样@就表示项目根目录中src这一层路径 } }}//使用方式如下，@符号表示'项目根目录-src'这一层目录import Hello from '@/components/Hello'...

2021-07-01 18:04:59 392

原创 nginx系列-网站基本配置

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-06-25 13:53:51 289

原创 nginx系列-常用基本命令

#检查配置文件是否有误nginx –t#下列操作均在nginx所在目录下进行，如/usr/local/nginx/sbin/#启动nginx进程./nginx#重新加载配置文件./nginx –s reload#关闭nginx进程./nginx -s stop

2021-06-21 18:08:33 54

原创 nginx系列-安装并配置启动访问

在安装nginx之前首先要确保服务器已经安装了以下工具：gcc、pcre-devel、zlib-devel、openssl 、openssl-devel，系统不同则安装命令也不相同，这里自行百度安装方法下载nginx包nginx官网下载地址：https://nginx.org/download/将下载好的nginx-1.10.1.tar.gz，放到/usr/local/下## 解压,在/usr/local目录下运行命令tar -zxvf nginx-1.10.1.tar.gz##进入ngi.

2021-06-21 17:47:34 275

原创 React系列-配置webpack，从而在导入组件时，省略.jsx后缀名

在webpack.config.js文件导出的配置对象中，新增resolve节点：module.export{ resolve:{ extensions:['.js','.jsx','.json'] //表示这几个文件的后缀名可以省略不写 }}

2021-06-21 10:22:43 665

原创 React系列-将组件抽离为单独的.jsx文件

components-Hello.jsx创建并导出组件export default function Hello(props){ return <div>这是Hello组件</div>}导入Hello组件import Hello from './components/Hello.jsx'//默认如果不做单独的配置，不能省略.jsx后缀名...

2021-06-21 09:34:17 142

原创 React系列-使用ES6展开运算符简化传递props过程

const dog={ name:'大黄', age:3, gender:'雄'}

2021-06-21 09:26:43 112

原创 React系列-创建函数式组件

创建组件的第一种方式：function Hello(){ return <h1>Hello</h1>; //或return null;}调用组件时，直接把组件的名称丢到页面上如果在一个组件中return一个null，则表示此组件什么都不渲染，在组件中，必须返回一个合法的JSX虚拟DOM元素props传送数据：传值：<Hello name="大黄"></Hello>接收数据：function Hello(props){ return

2021-06-14 20:54:41 368

原创 React系列-JSX中的语法注意事项

注释：多行注释：{/* */}，单行注释：{ //}两个特殊的属性名：className替代class，htmlFor替代label中的for属性jsx创建的DOM必须有唯一的根元素进行包裹标签必须成对出现，单标签要有闭合

2021-06-14 20:46:24 66

原创 React系列-Vue和React中key的作用

v-for或map中，如果需要保存状态，最好加上key，防止状态紊乱;在React中需要把key添加给被forEach、map或for循环直接控制的元素

2021-06-14 20:37:24 72

原创 React系列-在JSX中如何写JS表达式

当我们需要在jsx控制区域内写js表达式时，则需要把js代码写到{}内，{}可以：渲染数字渲染字符串渲染布尔值为属性绑定值let obj={ name="Hello"}<h1 title={obj.name}>哈哈哈</h1>渲染jsx元素渲染jsx元素数组Tips: forEach与map的区别：forEach无返回值，而map则是将指定操作的结果放到新数组中并返回新的数组map中必须写return如果箭头函数右侧只有一行代码，则不用{}，也

2021-06-14 19:13:44 474

原创 React系列-创建一个基本的webpack4.x项目

webpack基于node构建，支持所有nodeAPI和语法，webpack4.x，其中一个特性为约定大于配置，默认的打包入口文件路径是src->index.jsnpm init -y快速初始化项目在项目根目录创建src源代码目录和dist产品目录在src目录下创建一个index.html使用cnpm或npm安装webpack，运行cnpm i webpack webpack-cli -D(如果安装cnpm需要全局运行npm i cnpm -g)webpack4.x提供了约定大于配置，目的

2021-06-03 15:55:34 98

原创 React系列-虚拟DOM与Diff算法

虚拟DOMDOM本质：浏览器中的概念，用js对象表示页面元素，并提供一些操作元素的API虚拟DOM：是框架中的概念，用js对象来模拟页面中的DOM和DOM嵌套关系，API由程序员提供为什么要实现虚拟DOM？为了实现页面中DOM元素的高效更新如何实现DOM高效更新？按需更新，只重新渲染更新的数据所对应的页面元素DOM树：1.请求服务器的HTML代码2.先在内存中，渲染出一颗DOM树3.把DOM树呈现到页面上如何实现页面的按需更新？获取内存中的新旧DOM树，然后进行比对，得到需要被更新

2021-06-03 14:45:30 122 1

原创 React系列-react与vue的对比

模块化：是从代码的角度来进行分析的，把一些可复用的代码抽离为单个的模块组件化：是从UI界面的角度来进行分析的，把一些可复用的UI元素抽离为单独的组件组件化的好处：随着项目规模的不断扩大，手里的组件越来越多，把已写好的组件直接拿过来用，可以快速搭建页面，提高工作效率vue如何实现组件化：Vue.Component()/Vue.extends() /.vue文件(最常用，最普遍的方式)react中的组件化：没有vue这样的模板文件，react一切都是以js来表现的，要学习react，js要合格，es.

2021-06-02 17:59:41 56

zbl413845230的博客