在 React 组件中监听 android 手机物理返回/回退/back键事件

当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作。

比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态。我采取的办法如下:

继续阅读“在 React 组件中监听 android 手机物理返回/回退/back键事件”

React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法

在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素。在做技术选型的时候决定采用nextjs。项目开发过程中,nextjs的体验非常棒,个人觉得比create-react-app开发体验还要好,特别是HMR功能,虽然都有这个功能,但是nextjs做的更好一些。CRA里面修改了代码,格式化了文档,会导致整个页面刷新,这对于SPA项目的开发体验就很不好了。我在使用nextjs的开发过程中,如果不是自己主动去刷新浏览器,几乎就没有刷新过整个页面,所有的修改都是在不刷新页面的前提下就反映到了页面上,这个体验真的很棒。 继续阅读“React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法”

自己动手搭建react-ssr服务器端渲染项目架构

最近折腾了下React的ssr项目的搭建,之前折腾过一次没有太多的进展。这次重新开始搭建react的项目架构。项目源码:https://github.com/rt-zhangxuefei/react-ssr-template

特别感谢:慕课网的Delllee的课程。这里我使用了saga代替thunk,中间也遇到了一些坑,中间层代理使用了http-proxy-middleware。文章记录我搭建过程中遇到的一些问题:

继续阅读“自己动手搭建react-ssr服务器端渲染项目架构”

create-react-app@next支持css,less modules问题

最近使用create-react-app构建项目时,需要使用less并且支持modules,不想使用eject,所以使用了react-app-rewired+react-app-rewire-less-modules的方式。但是…构建时仍然抛错。搜寻良久,发现是create-react-app版本问题,于是按照最新的@next版本,然而还是报错。仔细分析了升级的部分,通过package.json的依赖包看错,react-scripts使用还是1.X版本,尝试升级react-scripts到@next版本。然后构建,一切OK!


2019年2月15日更新:

最新版的react-app-rewired配合customize-cra已经完全支持了less及模块化,不需要引入其它的插件了。快速搭建项目脚手架可以参考https://github.com/rt-zhangxuefei/react-startup

读一读React源码(创建实例constructClassInstance)

上一篇只是粗略从源码跟了下首次渲染的过程,这里继续看看实例化一个Component的过程。从一个简单的demo例子入手:

App继承了React.Component基类,基类里面做的事情很少,包括PureComponent基类

定义了几个属性:

继续阅读“读一读React源码(创建实例constructClassInstance)”

读一读React源码(目录结构及构建)

主要目录

项目的主要目录(packages,scripts),packages目录下是各个模块的react代码,scripts下主要是构建,测试等相关的代码

 

构建工具:rollup

注意

如果使用npm install会有报错,改用yarn install

 

项目构建打包相关的代码

入口文件:build.js

 

npm run build

构建生成各个版本和功能模块的js文件,编译出来文件比较多

antd pro权限实现初探

antd是蚂蚁金服推出的基于React的UI组件库,ant pro是基于 ES2015+Reactdvag2 和 antd的开箱即用的中台前端/设计解决方案。ant pro让我们可以快速构建一个常用的后台管理系统的前端UI,非常值得学习和推荐使用的一个框架。我个人在熟悉项目源码的过程中,收获颇丰。我觉得不容易理解的部分是权限这块,这里整理下我所理解的,希望对大家有点帮助。

组件源码文件结构:

index里面export了4个部分:

 

依赖关系

 

这里authority(角色名称)支持多种不同的类型,导致了一些复杂性