园子都荒废两个月了,实在是懒呀..近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑总结记录一下,只看文档是碰不上问题的,内容基础也不基础,高手还请绕道哈哈哈 文章略长,整个目录吧,想看哪儿看哪儿 ...
园子都荒废两个月了,实在是懒呀..
近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑
总结记录一下,只看文档是碰不上问题的,内容基础也不基础,高手还请绕道哈哈哈
文章略长,整个目录吧,想看哪儿看哪儿
- 基本使用
- 同一页面中使用
- 独立文件中使用
- JSX
- return后面只能有一个父级
- {}中嵌套JS表达式
- 受限的HTML属性
- 智能的...展开操作符
- 事件绑定与event对象传值
- 需闭合标签
- 属性、状态
- 属性
- 状态
- 组件的三种定义方式
- 函数式定义
- React.createClass方式定义
- extends React.Component方式定义
- 组件的生命周期
- 实例化期(Mounting)
- 存在期(Updating)
- 销毁期(Unmounting)
- 组件间的通信
- 父子通信
- 子父通信
- 兄弟通信
- 受控组件与非受控组件
- 非受控组件
- 受控组件
- 组件的复制
- 弹窗中的组件并不是在弹窗之后才加载,其实是初始就加载
一、基本使用
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'));
原标题:React使用小结
关键词:react
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。