自己在开发过程中遇到的一些问题，并觉得这是react或者reactNative本身的不足之处，浅浅记录一下。看看大家是否也遇到过或者遇到其他问题，并如何解决的！！持续更新中。。。 React问题

1、样式问题-图文混拍

reactNative中经常会有文本Text中带有View的场景。手机端页面设计风格常有比如一段文字后紧紧跟随一个icon，并随文本的换行而换行的样式，用于比如点击弹alert展示针对该文本的描述。这种通常我们使用Text组件中嵌入View组件这种hack方式(非官方推荐用法)。但是，rn的Text组件不同于View组件，在Text内部，很多View的属性比如margin、padding等往往是无效的，所有很难调整View组件的位置，容易出现View组件与文本不对齐甚至被截断的场景！

方法：不对齐的话我有时会通过给这个View上、下填补空白View的方式进行调整，或者View再嵌套View等方法去尝试，总之都是一些并非RN真正推荐的或者合理的方法去解决！

2、ReactElement渲染结果没有属性可以直接判断

react通过JSX标签的方式会生成一个ReactElement对象，哪怕是返回null，比如:

// JSX
const Bottom = () => {return null}

const Main = () => {
    return (
        <Box
            title="title"
            bottom={<Bottom/>}
        />
    )
}

虽然Bottom返回的是null，但是Bottom类型并不是null，而是一个渲染结果为null的ReactElement对象。所以如果Box需要对传入的属性bottom进行判断的话(比如bottom是否存在影响其他地方某个布局)，这是我们不能判断bottom是否为空/null。而React貌似也并没有一个直接的方法或者属性可以直接判断ReactElement对象渲染出来是否为空/null！

备注：isValidElement是检测某个值是否是一个React元素，React元素指的是通过JSX标签/createElement产生的值！

附加：JSX标签不同于HTML标签。一方面它必须封闭；二是只能返回一个根元素，这是因为JSX底层其实是被转化为了JavaScript对象，Babel会把JSX转译为React.createElement()函数调用，自然我们并不能在一个函数中返回多个对象；

方法：

1、采用函数的形式

// function
const renderBottom = () => {return null}

const Main = () => {
    return (
        <Box
            title="title"
            bottom={renderBottom()}
        />
    )
}

2、动态判断。Bottom渲染之后，获取元素渲染的情况比如高度、宽度等等。

3、状态管理

react本身并没有太好的状态管理方案！通常使用Redux、mobX第三方状态管理库。react本身是使用上下文createContext/useContext以及逐层传递props的方式进行状态管理。