React基础入门
2018-05-10 18:52:00 26 举报AI智能生成
React基础入门, 基础知识点梳理
作者其他创作
大纲/内容
React由来
PHP-字符拼接时代 - 2004
XHP时代 - 2010-可自定义HTML标签
JSX - 2013
Facebook前端工程师 Jordan Walke提出: 把 XHP 的拓展功能迁移到 JS 中- JSX
React选择开源
参考文章:https://segmentfault.com/a/1190000013365426?utm_source=tag-newest
虚拟DOM概念
传统-APP直接与DOM交互
虚拟DOM-APP与DOM中间插一层虚拟DOM
开源地址:https://github.com/Matt-Esch/virtual-dom
React中:https://doc.react-china.org/docs/faq-internals.html
版本选择及安装
CDN: https://cdnjs.com/libraries/react
alpha版：内部测试版
beta版：公开测试版
rc版： 候选版本
官网:https://reactjs.org/blog/all.html
npm,webpack,webpack-dev-server,Babel...
官网推荐的: https://reactjs.org/docs/add-react-to-a-new-app.html
2016-07版本变化 0.14升到15.0, 不在主动支持IE8
React组件基础
React组件
入口的定义：ReactDOM.render(<index/>, document.getElementById('app'));
组件的return函数返回的HTML节点只能是一个
组件大写字母开头
组件也可以通过参数的形式传递
JSX内置表达式
三元表达式，&&符等
<img src={user.avatarUrl}></img>;
{/*注释*/}
任何 {} 包裹的 JavaScript 表达式作为子代传递
<MyComponent>foo</MyComponent>等价于
<MyComponent>{'foo'}</MyComponent>
<MyComponent>foo</MyComponent>等价于
<MyComponent>{'foo'}</MyComponent>
生命周期
React属性与事件
State属性
constructor中初始化
this.setState({})修改
state的作用域只属于当前类
Props属性
props对于模块属于 外来 属性
传递参数 <index userName="king">
模块中接收参数： this.props.userName
属性验证：https://reactjs.org/docs/typechecking-with-proptypes.html
事件绑定
this.fun.bind(this)
通过父页面传过来的事件函数传参
组件的Refs
定义refs: <input ref="myInput"/>
获取: this.refs.myInput
不要在render或render之前使用
不要过度使用
原生方法获取
React样式
内联样式
class需改成className
确定一些动画和伪类不能使用
内联样式中的表达式
引入CSS文件
Ant Design 样式框架
react-router
https://github.com/ReactTraining/react-router
0 条评论
下一页
