React使用小结

园子都荒废两个月了，实在是懒呀..

近段时间用React开发了几个页面，在使用过程中着实碰到了一些问题，估计刚开始学习的伙伴们都会遇到各种各样的坑

总结记录一下，只看文档是碰不上问题的，内容基础也不基础，高手还请绕道哈哈哈

     文章略长，整个目录吧，想看哪儿看哪儿

1.   　基本使用
   1. 同一页面中使用
   2. 独立文件中使用
2. 　　JSX
   1. return后面只能有一个父级
   2. {}中嵌套JS表达式
   3. 受限的HTML属性
   4. 智能的...展开操作符
   5. 事件绑定与event对象传值
   6. 需闭合标签
3. 　　属性、状态
   1. 属性
   2. 状态
4. 　　组件的三种定义方式
   1. 函数式定义
   2. React.createClass方式定义
   3. extends React.Component方式定义
5. 　　组件的生命周期
   1. 实例化期（Mounting）
   2. 存在期（Updating）
   3. 销毁期（Unmounting）
6. 　　组件间的通信
   1. 父子通信
   2. 子父通信
   3. 兄弟通信
7. 　　受控组件与非受控组件
   1. 非受控组件
   2. 受控组件
8. 　　组件的复制
   1. 弹窗中的组件并不是在弹窗之后才加载，其实是初始就加载

一、基本使用

1. 同一页面中使用

首先，需要核心库react.js与React的DOM操作组件react-dom.js

其次，如果需要在当前HTML页面中直接写react的代码，就要引入browser.js文件，用于解析相关的JSX语法，同时，script标签指定好type

引入browser是为了在浏览器端能直接解析JSX，不过相当耗时，所以建议在本地解析之后再引入ES5的语法文件。当然，JSX语法是不必要的，只是推荐使用。

通过ReaactDOM.render方法渲染，参数1指定组件，参数2指定标签元素

2. 独立文件中使用

使用babel工具对文件进行解析，Sublime Text中怎么配置babel编译？

查看编译后的文件

可以看到，JSX语法，核心就是React的createElement方法，我可以也直接使用这个方法创建。

这一丁点代码就编译了那么久，确实应该在本地先编译好

除了直接在浏览器引入react和react-dom之外，既然需要本地先编译，也可以使用构建工具如Webpack,不仅支持ES6与JSX的解析，还提供了一系列如代码压缩文件合并的功能，也便于管理，不必每次都得手动编译

可以通过npm工具安装react和react-dom包后，引入直接使用（需要ES6基础）

这里就不展开说明了，有兴趣的可以自行去查查相关用法

二、JSX

JSX是React中和重要的部分，直观的表现是将HTML嵌入到了JS中，通过工具（如Babel）编译成支持的JS文件

var Info = React.createClass({  render: function() {    return <p className="user">{this.props.name}</p>  }});ReactDOM.render(  <Info name="Jack" />,   document.getElementById('box'));

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：React使用小结

关键词：react