react学习
Chatwei
这个作者很懒,什么都没留下…
展开
-
nextJS styled-jsx 的使用
作用1.可以根据组件,按需加载,卸载时一起卸载2.不会形成样式命名冲突示例import { withRouter } from 'next/router'const Task = ({ router,fzr }) => ( <div> {/* 定义当前页面样式 */} <style jsx>{` ...原创 2019-05-19 11:01:23 · 880 阅读 · 0 评论 -
nextJS自定义App
作用1.固定Layout2.保持一些公用的状态3.给页面传入一些自定义数据4.自定义错误处理示例_app.jsimport App, { Container } from 'next/app'import 'antd/dist/antd.css'import Layout from '../components/work/layout'class AntApp extends ...原创 2019-05-19 11:01:32 · 1492 阅读 · 0 评论 -
nextJS数据获取规范
getInitialProps它是nextJS提供给我们进行数据获取的功能。它只针对pages/内的component使用。它可以在路由跳转时提前获取数据,并且可以在App中获取全局数据。它可以帮助我们把客户端和服务端的数据进行同步,这是我们在服务器端渲染最大的痛点之一。有了它之后,我们要尽可能的把跟页面数据获取相关的内容放到getInitalProps里面,而不是像以前一样放在comp...原创 2019-05-19 11:01:38 · 1680 阅读 · 0 评论 -
nextJS路由
// pages ---路由文件// --_app.js ---启动文件,不走路由// --_document.js ---宿主文件,不走路由// --a.js ---可通过http://localhost:3000/a 进行访问// --b.js ...原创 2019-05-19 11:01:50 · 3866 阅读 · 0 评论 -
nextJS集成antd
nextjs 默认不支持css文件的问题解决解决方法:修改nextjs的默认配置,使用@zeit/next-css插件第一步:安装npm i @zeit/next-css -s第二步:创建next.config.js,并写配置// 让nextjs支持css的配置const withCss = require('@zeit/next-css')if (typeof require !=...原创 2019-05-19 11:00:57 · 2235 阅读 · 0 评论 -
nextJS搭建
// 手动搭建nextJS第一步:初始化一个package.jsonnpm init第二步:安装next.jsnpm install --save next react react-dom第三步:配置启动命令,然后启动{“scripts”: {“dev”: “next”,“build”: “next build”,“start”: “next start”}}npm ru...原创 2019-05-19 11:01:59 · 2335 阅读 · 0 评论 -
react 全栈概念学习
// 为什么要用next.js因为前端框架如react,angular是把js加载到浏览器之后,再去渲染出内容的,这样会导致:1.首屏展示速度慢2.无法seo3.初始数据只能向服务器请求而这些问题,在同构项目中都可以解决。// react16本身推出了server runder工具实现服务器端渲染,但是它的构建太复杂,所以目前选择next.js做react的同构项目,是非常好的选择。...原创 2019-05-17 21:45:52 · 620 阅读 · 0 评论 -
react-router-dom
传参方式1.通配符传参优点:页面刷新,参数不丢失缺点:只能传递字符串<Route path='/path/:name' component={Path}/><Link to="/path/通过通配符传参">通配符</Link>this.props.match.params.name // 获取参数2.query...原创 2019-05-25 14:17:24 · 182 阅读 · 0 评论 -
nextJS 配置项
可配置内容const withCss = require('@zeit/next-css')// 配置说明const configs = { // 编译文件的输出目录 distDir: 'build', // 是否给每个路由生成Etag // Etag是用来做缓存验证的,如果路由执行的时候,新的Etag是相同的,那么就会复用当前内容,而无需重新渲染 ...原创 2019-05-19 18:49:58 · 4545 阅读 · 2 评论 -
nextJS 懒加载
什么是懒加载当路由导航到某个模块,或者某个组件的时候,才加载那个模块/组件的js文件。模块懒加载第一步,先选择一个需要懒加载的插件,我们拿moment做例子。先安装它:npm install moment -s第二步,在页面里,用moment写一个例子const Task = ({ time }) => ( <div> <span>...原创 2019-05-19 14:03:19 · 1633 阅读 · 0 评论 -
nextJS styled-components 集成
为什么要集成如果做服务器端渲染,那就需要拿到css的文本,然后在把它放入body的head中,一起变成html模板传递给客户端。集成步骤第一步,安装styled-components和babel-plugin-styled-componentsnpm install styled-components babel-plugin-styled-components -s第二步,添加babe...原创 2019-05-19 11:01:12 · 1372 阅读 · 0 评论 -
nextJS自定义document
_document.js是什么1.它只有在服务端渲染的时候才会被调用,客户端渲染,它是不会起任何作用的2.它用来修改服务端渲染的文档内容3.一般用来配合第三方css-in-js方案使用示例import Document, { Html, Head, Main, NextScript } from 'next/document'class AntDocument extends Doc...原创 2019-05-19 11:01:18 · 2840 阅读 · 0 评论