React

React进阶学习笔记

react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16 render返回类型除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）例如： render(){ return[ <div>hallo</div>, <div>word</div> ] } 或者 render(){ return "hallo word" } 错误处理 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如： componentDidCatch(error, info){ console.log(error,info) } Portals React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框 ReactDOM.createPortal(child, container) 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上自定义DOM属性在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素 React AJAX（搭配jQuery）通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求 Virtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM Virtual-DOM的优势：减少操作DOM，处理视图和状态的关系没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了 react-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量安装react-markdown yarn add react-markdown 导入 import ReactMarkdown from ‘react-markdown’ 测试 let markdown = "**这是加粗的文字**\n\n" + "*这是倾斜的文字*`\n\n" + "***这是斜体加粗的文字***\n\n" + "~~这是加删除线的文字~~ \n\n" + "`console.log(111)` \n\n" + "``` var a=11; ```"; <ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/>

React Hooks学习笔记

React Hooks提供了新特性来给纯函数组件可以管理状态学过react都知道纯函数组件没有生命周期钩子，而且还不能更新状态，只有class组件有生命周期钩子和状态而一个好的组件要有高独立性，高可复用性，而class组件本身就是有状态，因此要复用起来比较麻烦，而且还有个this缺陷 React Hooks的出现，是因为类组件会继承React.Component父类，而React.Component父类拥有大量的方法和属性，在开发一些小型组件时，完全没有必要用到这么多的方法和属性，就好吧杀鸡用屠龙刀一样，可以但是没有必要，而纯函数组件就不存在这些方法和属性，可谓是轻量级例如： class组件： class Hi extends React.Component{ constructor(props) { super(props) this.state = { count:0 } } render(){ console.log(this.state.count) return( <div> <p>数据：{this.state.count}</p> <button onClick={this.addGo.bind(this)}>GO</button> </div> ) } addGo(){ this.setState({count:this.state.count+1}) } } 那么函数组件+React Hooks怎么实现状态更新呢？而function组件想更新状态可以通过React Hooks来实现，例如：例如： import React, { useState } from 'react' function Hi(){ const [ count , setCount ] = useState(0) return ( <div> <p> 数据：{count} </p> <button onClick={()=>{setCount(count+1)}}>GO</button> </div> ) } 没错就是这么简单，看起来函数组件+React Hooks更简洁，更容易理解...

简单使用Ant Design组件库

Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架官网：https://ant.design/index-cn 使用create-react-app初始项目 yarn create react-app antd-demo 运行 yarn start 安装antd组件库 yarn add antd 通过import { 组件名 } from “antd"方式导入antd组件导入antd css样式 @import ‘~antd/dist/antd.css’; 在typescript上使用 yarn create react-app antd-demo-ts –template typescript Antd的样式使用了less作为开发语言第一个实例demo import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( <Space direction="vertical"> <DatePicker/> </Space>, document.getElementById('root'), );

NextJS学习笔记

NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览 SPA：全称single page web application 单一页面，加载慢，百度目前不支持spa的SEO NextJS：服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置手动配置： yarn add react react-dom next yarn init 修改package.json文件在scripts下加添加 “dev” : “next”, “build”: “next build”, “start”: “next start” 创建个js文件 function Hallo(){ return( <div>hallo next.js</div> ) } export default Hallo yarn dev调试如果浏览器输出正确则配置成功通过create-next-app脚手架创建项目 npm install create-next-app -g 或者 yarn add create-next-app -g 创建create-next-app项目 npx create-next-app demo 或者 yarn create-next-app demo 跑create-next-app项目 yarn dev 访问http://localhost:3000/，正常显示网页则配置正常编程式跳转 import Link from "next/link" <Link href="/"><a>返回</a></Link> Link不支持直接加兄弟标签，起码要有一个父级标签...

深入学习React

setState() 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能） setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据如果当前setState()依赖于前面的setState()，解决方法： this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数例如： this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新 jsx语法的转化 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新例如： const Abc = ( <div>hallo</div> ) console.log(Abc) 可以看到输出返回的是一个js对象 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）组件更新机制 setState()的作用：修改state，更新组件父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件更新根组件，那么其下全部的组件树都会更新组件性能优化 state只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中如果需要在多个方法中使用（共享）的数据，应该放在this中因为组件更新机制的原因，子组件没有变化也会重新渲染解决方法：使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...