Sophie_U的博客

文章目录一、关于React Native二、环境搭建2.1 安装依赖2.2 Android开发环境三、初始化一个新项目四、使用Android Studio跑起来一、关于React Native1. 什么是React Native?React Native（RN）是facebook开源的一套用于开发移动端跨平台App的技术框架。RN用于开发原生App可以解决基于Web开发的应用所面对的性能和...

一、打包后 部署访问，报错404，找不到对应的main.js或main.css参考stackoverflow上类似问题： 初次直接通过 npm run build打包react webapp后将文件夹build（通常改名为对应项目名称）整个部署到服务器，浏览器通过www.xxx.com/build/访问时，报错如下： 1.1 原因分析：...

通常情况下，使用create-react-app进行打包后，会生成最终打包文件main.js，且这个文件在项目内容变多，引用第三方插件后，但得很大(>100kb)。通过Code Spliting进行代码拆分，并使用动态import使路由对应组件在使用时才被加载，可以优化打包，由原来一个main.js生成为多个单独的js文件，并在首次加载时，只加载首屏用到的组件，从而提高首屏加载速度。...

一、React组件是状态机1.1 状态理解React的数据流：数据由父节点向下传递到子节点（由外到内传递），如果顶层组件某个prop改变，React会向下传递，重新渲染所有使用过该属性的组件。 react组件是一个状态机，组件都有一个初始状态，通过与用户的交互，使状态发生改变，然后重新渲染UI，让用户界面与数据保持一致。 在传统js中，如果数据发生了变化，我们需要操作都

入门React后，基本上可以写一个小型项目了，但React还有很多高级功能及API可以上手方便开发。以下便是React进阶教程说明。目录代码拆分错误处理ErrorBoundaries上下文ContextRefs片段Fragment代码拆分类似于vue中的组件引用时加载，react也可以在引用时再加载到组件中，从而使打包的app.js被拆分为多个组件。代码拆分的方法有多...

入门React后，基本上可以写一个小型项目了，但React还有很多高级功能及API可以上手方便开发。以下便是React进阶教程说明。参考文档-react中文文档目录高阶组件HOC深入JSX渲染属性PropTypes类型检查不受控组件ReactDOM的API常见问题事件处理函数State和Props项目文件结构高阶组件HOC高阶组件（HOC-Higher-...

一、react的虚拟dom 1、在react中，其最大的亮点在于虚拟DOM技术，它极大强度上提升了应用性能。 2、在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。 3、在react中使用JSX语法来创建一个对象的模板

CSSTransition此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原cla...

在运行好第一个RN项目后，通过脚手架的App可以看到以下调试信息：Ctrl + M：在模拟器上打开调试Debug菜单（真机上通过摇动手机打开）双击R：重新加载AppEnable Hot Reload：在当前页热加载Error & Warning在JS运行时出现Error或者Warning时，在模拟器中会以红屏的形式展示WarningsReact Native 程序运...

场景分析 当使用Route在页面内做跳转时，有时想要传一些自定义属性到子路由组件中，而常用的<Route path={xxx} component={Component} test={123}/>这种方式设置test属性是无效的，因此需要用到Route的第二种渲染方式解决办法 Route组件的render方法<Route path="/home" re...