偶然看到一道react面试题，a组件在b组件内，c组件在a组件内，如何让他渲染出来，a组件和c组件同级。一想，原理应该和Dialog的实现差不多，不过太久没用那个组件已经有点不记得了，而且随着react16的出现也有了更好的解决方式，所以记录一下。
more >>

设备像素、设备独立像素、PPI、DPR、viewport，各种移动端布局的概念总是容易遗忘和混淆，这里推荐几篇博客和做一下记录备忘。

blog

设备像素，设备独立像素，CSS像素
meta viewport 你真的了解吗？
使用Flexible实现手淘H5页面的终端适配
可以通过前两篇文章了解一下基本概念，从第三篇文章借鉴一下手淘的布局解决方式。

概念

设备像素：又称物理像素，一个物理像素点。
设备独立像素：一个虚拟的像素，在前端中使用css像素来表示。
DPR：设备像素比，设备像素/设备独立像素，现在通常大于1

PPI：每英寸多少像素点，标准是160PPI，这个时候DPR=1，PPI超过300被Apple称为Retina视网膜屏幕。

viewport：视窗，视觉视口 visual viewport就是设备可见的部分，布局视口layout viewport就是浏览器布局所用的viewport。不同浏览器布局viewport不同，通常在手机中布局viewport大于视觉viewport。使用一个通用的禁止缩放的meta标签<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">布局viewport将和视觉viewport等大。所以一个320px的5s手机，其布局viewport为980px，缩小后，一个300px的宽的方块其实只占1/3左右。

前言

当我们选择使用一个新的工具，一定是他解决了一定的痛点，在上一篇文章中，mobx的自动追踪依赖依赖，帮我们在毫不费力地情况下近乎完美的解决了一个组件对state的依赖，基本可以让shouldComponentUpdate在你的代码里消失。而这次介绍的特性则解决了setState的一些副作用。

在使用mobx的时候遇到不触发更新的情况，通常都是对mobx的可观测对象理解有误。不过mobx的文档的确不错，把常用的坑都列出来了。

1
2
3
4
5
6
7
8
9
10
11
12
13

import React, { Component } from 'react';
import { observer, Observable } from 'mobx-react';
@observer MyCom extends Component {
  render() {
    return (
      <Wrap
        Com1={<input value={store.value} />} // 这种使用方法没有问题
        Com2={() => <input value={store.value} />} // 在Warp没有@observer的情况下，这种使用方法将不会触发更新，因为input已经处于Wrap的组件内，而Wrap并没有被observer
        Com3={() => <Observable>{() => <input value={store.value}>}</Observable>} // 上面的情况需要使用这种
      />
    )
  }
}

前言

使用一种工具就像使用一个包装好的黑盒子，我们不必探究其内部到底是如何实现，只需要能够将用法了然于胸，什么样的输入会得到什么样的输出能有完美的预测。但不幸的事，大部分文档都难以让自己达到这点，为此我们不得不浅析一下源码，来探寻他是如何实现的，避免出现意料之外的情况导致bug，也防止做出多余的操作，精简代码，减少bug。

自动追踪依赖

在使用redux的时候，我们不得不使用connect来从store中取到当前组件所需要的state，这其实也是一个依赖分析的问题，只有当组件所依赖的state变化时，当前组件才会更新，避免了不必要的render。而在使用mobx时，这一步被自动完成了，因此在使用mobx时，会感到极其酸爽舒适，只需要一个@observer就能尽情地使用store中的state了，而且完全不用担心性能问题，那么这究竟是如何做到的？
more >>

• source-map-support
  在使用babel-polyfill后require('source-map-support').install()引入source-map

• babel-register

  1 2 3 4 5

  // Javascript require hook require('babel-register')({ presets: ['es2015', 'react', 'stage-0'], plugins: ['add-module-exports'] })

• koa-convert
  将koa1的generator转为await

  1 2	const convert = require('koa-convert'); app.use(convert(bodyparser));

• koa-webpack-dev-middleware
  webpack中间件

  1 2 3 4 5

  const compiler = webpack(config) app.use(convert(devMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })))

• koa-webpack-hot-middleware

  1 2	const compiler = webpack(config) app.use(convert(hotMiddleware(compiler)))

Write one, run everywhere

“Learn once, write anywhere”是react提出的口号，在react-native开源后，这个口号得到了实现，我们只需要学会react，就能同时在web端，安卓和ios开发应用。但是，react-native在安卓和ios端能达到百分之九十以上的代码复用，却不能运行在移动H5端，我们不得不另外开发一套H5代码，以使应用能在手机浏览器上使用。react-native-web就是这样一个将react-native应用转换成H5的库，以让我们能达到“Write one, run everywhere”。

react-native-web仓库： https://github.com/necolas/react-native-web
代码示例: https://github.com/cloudZQY/rnweb

1.实现原理

在写代码之前，我们浅析一下这个库的实现。在我们的react-native代码中，所有的控件都是import自react-native

1

import { View, Text, TextInput } from 'react-native';

那如果我们把这些组件全部在web上重新实现一遍，就能使其运行在web端了，用div代替View，用input代替TextInput，用img代替Image，再加上相应的默认样式，这样我们写的RN代码就能平滑地迁移到web端，并且能在样式上基本保持一致性。react-native-web就是这样一个库，他react-native的大部分组件都用web实现了一遍以达到我们的代码能在web运行的要求。
more >>

自适应高度的多行文本输入框AutoTextInput是一种常用需求，在RN官方文档上就有其demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class AutoExpandingTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
      height: 0,
    };
  }
  render() {
    return (
      <TextInput
        {...this.props}
        multiline={true}
        onContentSizeChange={(event) => {
          this.setState({height: event.nativeEvent.contentSize.height});
        }}
        onChangeText={(text) => {
          this.setState({text});
        }}
        style={[styles.default, {height: Math.max(35, this.state.height)}]}
        value={this.state.text}
      />
    );
  }
}

利用onContentSizeChange，在就在内容内容布局改变（如换行）的时候能获取到当前contentSize中的高度，然后通过state调整其input的高度。
原理很简单，但是这种写法在Android上却是有bug的，onContentSizeChange这个方法在Android上仅会初始render的的时候触发一次，其后就不会在触发了。目前我的RN版本为0.41.0，而Android试验了6.0和7.0。在github上也有相应的#issue6552，于RN版本0.33就有了，预计以后是会解决的。
但是我们现在该如何避免这个bug呢，这时候需要利用另一个事件onChange，也是能取到contentSize的。不过onChange也有一个缺点，他在非用户输入的情况是不会触发的，也就是说我在TextInput带有初始的defaultValue时，无法改变组件的高度，会造成看不见的情况。这里要结合这两种事件来解决。
顺便再添加minHeight和maxHeight的一个完整的AutoTextInput如下
more >>

React-Native中的Modal组件可以用来覆盖包含React Native根视图的原生视图，是RN经常需要用到的一个组件，其使用的方式却很难受。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Demo extends Component {
  static state = {
    visible: false,
  }
  render() {
    <View>
      <Model
        visible={this.state.visible}
        onRequestClose={() => {}}
      />
    </View>
  }
}

如果使用RN初始的Modal组件，每次使用Modal都需要在View里面插入一个Modal，还得根据state来控制Modal的呈现，调用很繁琐。而一个页面可能有多个Modal组件，会使代码非常的乱。
而对于前端来说，调用一个这样的控件，我们最习惯的方式则是Dialog.show()。如果最方便的实现这种调用Modal的方式呢？这里我推荐使用Decorator修饰器来包装Component达到我们的需求。
more >>