对于React的理解

React是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离

July 04, 2019

4 min read

javascript reactjs

为什么在产品应用中一定要预先编译JSX？

因为React可以在编译期间就可以发现错误和调试，另一方面预先编译jsx就可以不用在浏览器运行时编译，提高性能，所以在产品的应用中要预先编译jsx为javascript文件，使用Facebook官方工具react-tools，可以实时编译JSX文件，当然也可以与第三方工具或者IDE整合，比如（Webstrom）

注意jsx语法是可选的，你可以纯javascript编写，使用jsx可以提高效率

React有那些代码规范？

原生HTML原生DOM元素名以小写字母开头，而自定义的React组件以大写字母开头

欢迎补充

怎么调试React应用？

使用React Developer Tools可以看到DOM元素和React组件之间的映射以及属性props和state在组件间的传递，React Developer Tools是一个chrome扩展，再配合chrome开发者工具（搭梯子翻墙），就可以实现React应用断点和组件调试，注意版本兼容性问题React Developer Tools最新版声明不兼容旧版0.13，我在尝试一个demo中就遇到一些问题，比如

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of CommentList`. 
[See for more information](https://fb.me/react-warning-keys).

React提示真是完美，告诉你怎么做还告诉为什么这么做，非常棒

/**
 * 评论列表子组件
 */
var CommentList = React.createClass({
    render: function () {
        /**
         *  遍历data数据，并返回一个包含多个组件元素的数组
         */
        var commentNodes = this.props.data.map(function (comment) {
            return (
                /*
                * Warning: Each child in an array or iterator should have a unique "key" prop
                * 在数组或者迭代器中需要给子级唯一id的属性
                * 子级需要设置唯一id来保证多个渲染阶段保持自己的特征和状态
                * https://fb.me/react-warning-keys
                * 新增key={comment.id}
                * React版本1.4
                */
                <Comment author={comment.author} key={comment.id}>
                    {comment.text}
                </Comment>
            );
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
});

Target container is not a DOM element

Target container is not a DOM element（目标容器不是DOM元素）

原因:把react组件放在目标容器的前面，导致组件先执行，而DOM元素没有加载进来，React则会提示目标容器不存在;解决方式：把组件引用放在目标元素的后面

对于组件，组件属性和生命周期的理解

关于组件

1：ReactDOM.render() 实例化根组件，启动框架，把组件实例注入到第二个参数指定的原生的DOM元素中并且引导其它组件启动，在0.13之后使用ReactDOM.render()实例化根组件，启动框架
2：React的组件就像HTML的DOM树一样可以进行树状结构的组合在一起，也就是说整个React应用就是一系列的组件按照树状的结构组合而成