对于React的理解

为什么在产品应用中一定要预先编译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应用就是一系列的组件按照树状的结构组合而成

组件属性

props

1:props属性数据是在组件树中一级一级传递的
2:组件不能修改自身的props属性
3:子组件可以通过this.props属性获取父组件中的参数

state

1:可以通过调用this.setState()重新渲染组件。
2:state仅用于实现交互功能,对用户输入、服务器请求或者时间变化等作出响应,这时就需要使用State

生命周期

更多

你的欣赏是我最大的动力

Yanxiong Huang

My name is Yanxiong Huang. graduated from Nanyang middle school.Love Linux,familiar with Node.js,Docker,Serverless... and more Web technology.Contact Me:QQ 31356617;Email:huangaynxiong2013@gmail.com

guangzhou,china http://www.myfreax.com

乐在分享