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}/>

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是一个用于生产环境的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不支持直接加兄弟标签，起码要有一个父级标签...

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)，该钩子函数是更新阶段的，组件重新渲染前执行...

React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化 安装react npm i react react-dom 必需：react和react-dom react包是提供创建元素，组件等功能，是核心（废话） react-dom包提供DOM相关的功能 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上 也可以通过引入src文件的方式引入cdn文件或者本地文件 第一个例子 <script type="text/babel"> ReactDOM.render( <h1>hallo,react!!!</h1>, document.getElementById("app") ); </script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了 jsx是一种JavaScript语法扩展，例如： const hallo = <h1>hallo</h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的） 在jsx中插入JavaScript表达式，用大括号包含起来，例如： function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = <h1>hallo,{hallo(yes)}</h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx，例如： const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架 初始化项目 npx create-react-app app 启动项目（在项目根目录执行） npm start或者yarn start 模块化导入react...