做网站ps能用美图秀秀么,python基础教程推荐,青岛专业公司网站设计公司,国外网站鞋子做的好的网站今日周末#xff0c;改了个表单验证然后无所事事了#xff0c;然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还是觉得有点欢乐的 现在最热门的前端框架#xff0c;毫无疑问是 Re…今日周末改了个表单验证然后无所事事了然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还是觉得有点欢乐的 现在最热门的前端框架毫无疑问是 React 。 上周基于 React 的 React Native 发布结果一天之内就获得了 5000 颗星受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目因为该公司对市场上所有 JavaScript MVC 框架都不满意就决定自己写一套用来架设 Instagram 的网站。做出来以后发现这套东西很好用就在2013年5月开源了。 由于 React 的设计思想极其独特属于革命性创新性能出众代码逻辑却非常简单。所以越来越多的人开始关注和使用认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目目标更是宏伟希望用写 Web App 的方式去写 Native App。如果能够实现整个互联网行业都会被颠覆因为同一组人只需要写一次 UI 就能同时运行在服务器、浏览器和手机参见《也许DOM 不是答案》。 既然 React 这么热门看上去充满希望当然应该好好学一下。从技术角度可以满足好奇心提高技术水平从职业角度有利于求职和晋升有利于参与潜力大的项目。但 是好的 React 教程却不容易找到这一方面因为这项技术太新刚刚开始走红大家都没有经验还在摸索之中另一方面因为 React 本身还在不断变动API 一直在调整至今没发布1.0版。 我学习 React 时就很苦恼。有的教程讨论一些细节问题对入门没帮助有的教程写得不错但比较短无助于看清全貌。我断断续续学了几个月看过二十几篇教程在这个过程中将对自己有帮助的 Demo 都收集下来做成了一个库 React Demos 。 下面我就根据这个库写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍就能初步掌握 React 。当然前提是你必须拥有基本 JavaScript 和 DOM 知识但是你读完就会发现React 所要求的预备知识真的很少。 零、安装 React 的安装包可以到官网下载。不过React Demos 已经自带 React 源码不用另外安装只需把这个库拷贝到你的硬盘就行了。
$ git clone gitgithub.com:ruanyf/react-demos.git 如果你没安装 git 那就直接下载 zip 压缩包。 下面要讲解的10个例子在各个 Demo 子目录每个目录都有一个 index.html 文件在浏览器打开这个文件大多数情况下双击即可就能立刻看到效果。 需要说明的是React 可以在浏览器运行也可以在服务器运行但是本教程只涉及浏览器。一方面是为了尽量保持简单另一方面 React 的语法是一致的服务器的用法与浏览器差别不大。Demo11 是服务器首屏渲染的例子有兴趣的朋友可以自己去看源码。 一、HTML 模板 使用 React 的网页源码结构大致如下。
!DOCTYPE html
html head script src../build/react.js/script script src../build/JSXTransformer.js/script /head body div idexample/div script typetext/jsx // ** Our code goes here! ** /script /body /html 上面代码有两个地方需要注意。首先最后一个 script 标签的 type 属性为 text/jsx 。这是因为 React 独有的 JSX 语法跟 JavaScript 不兼容。凡是使用 JSX 的地方都要加上 typetext/jsx 。 其次React 提供两个库 react.js 和 JSXTransformer.js 它们必须首先加载。其中JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间实际上线的时候应该将它放到服务器完成。
$ jsx src/ build/上面命令可以将 src 子目录的 js 文件进行语法转换转码后的文件全部放在 build 子目录。 二、React.render() React.render 是 React 的最基本方法用于将模板转为 HTML 语言并插入指定的 DOM 节点。
React.render(h1Hello, world!/h1, document.getElementById(example) ); 上面代码将一个 h1 标题插入 example 节点查看 demo01运行结果如下。 三、JSX 语法 上一节的代码 HTML 语言直接写在 JavaScript 语言之中不加任何引号这就是 JSX 的语法它允许 HTML 与 JavaScript 的混写查看 Demo02 。
var names [Alice, Emily, Kate]; React.render( div { names.map(function (name) { return divHello, {name}!/div }) } /div, document.getElementById(example) ); 上面代码体现了 JSX 的基本语法规则遇到 HTML 标签以 开头就用 HTML 规则解析遇到代码块以 { 开头就用 JavaScript 规则解析。上面代码的运行结果如下。 JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组则会展开这个数组的所有成员查看 demo03 。
var arr [h1Hello world!/h1, h2React is awesome/h2, ]; React.render( div{arr}/div, document.getElementById(example) ); 上面代码的arr变量是一个数组结果 JSX 会把它的所有成员添加到模板运行结果如下。 四、组件 React 允许将代码封装成组件component然后像插入普通 HTML 标签一样在网页中插入这个组件。React.createClass 方法就用于生成一个组件类查看 demo04。
var HelloMessage React.createClass({ render: function() { return h1Hello {this.props.name}/h1; } }); React.render( HelloMessage nameJohn /, document.getElementById(example) ); 上面代码中变量 HelloMessage 就是一个组件类。模板插入 HelloMessage / 时会自动生成 HelloMessage 的一个实例下文的组件都指组件类的实例。所有组件类都必须有自己的 render 方法用于输出组件。 组件的用法与原生的 HTML 标签完全一致可以任意加入属性比如 HelloMessage nameJohn / 就是 HelloMessage 组件加入一个 name 属性值为 John。组件的属性可以在组件类的 this.props 对象上获取比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。 添加组件属性有一个地方需要注意就是 class 属性需要写成 className for 属性需要写成 htmlFor 这是因为 class 和 for 是 JavaScript 的保留字。 五、this.props.children this.props 对象的属性与组件的属性一一对应但是有一个例外就是 this.props.children 属性。它表示组件的所有子节点查看 demo05。
var NotesList React.createClass({ render: function() { return ( ol { this.props.children.map(function (child) { return li{child}/li }) } /ol ); } }); React.render( NotesList spanhello/span spanworld/span /NotesList, document.body ); 上面代码的 NoteList 组件有两个 span 子节点它们都可以通过 this.props.children 读取运行结果如下。 这里需要注意只有当子节点多余1个时this.props.children 才是一个数组否则是不能用 map 方法的 会报错。 六、React.findDOMNode() 组件并不是真实的 DOM 节点而是存在于内存之中的一种数据结构叫做虚拟 DOM virtual DOM。只有当它插入文档以后才会变成真实的 DOM 。根据 React 的设计所有的 DOM 变动都先在虚拟 DOM 上发生然后再将实际发生变动的部分反映在真实 DOM上这种算法叫做 DOM diff 它可以极大提高网页的性能表现。 但是有时需要从组件获取真实 DOM 的节点这时就要用到 React.findDOMNode 方法查看 demo06 。
var MyComponent React.createClass({ handleClick: function() { React.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { return ( div input typetext refmyTextInput / input typebutton valueFocus the text input onClick{this.handleClick} / /div ); } }); React.render( MyComponent /, document.getElementById(example) ); 上面代码中组件 MyComponent 的子节点有一个文本输入框用于获取用户的输入。这时就必须获取真实的 DOM 节点虚拟 DOM 是拿不到用户输入的。为了做到这一点文本输入框必须有一个 ref 属性然后 this.refs.[refName] 就指向这个虚拟 DOM 的子节点最后通过 React.findDOMNode 方法获取真实 DOM 的节点。 需要注意的是由于 React.findDOMNode 方法获取的是真实 DOM 所以必须等到虚拟 DOM 插入文档以后才能使用这个方法否则会返回 null 。上面代码中通过为组件指定 Click 事件的回调函数确保了只有等到真实 DOM 发生 Click 事件之后才会调用 React.findDOMNode 方法。 React 组件支持很多事件除了 Click 事件以外还有 KeyDown 、Copy、Scroll 等完整的事件清单请查看官方文档。 七、this.state 组件免不了要与用户互动React 的一大创新就是将组件看成是一个状态机一开始有一个初始状态然后用户互动导致状态变化从而触发重新渲染 UI 查看 demo07 。
var LikeButton React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text this.state.liked ? like : haven\t liked; return ( p onClick{this.handleClick} You {text} this. Click to toggle. /p ); } }); React.render( LikeButton /, document.getElementById(example) ); 上面代码是一个 LikeButton 组件它的 getInitialState 方法用于定义初始状态也就是一个对象这个对象可以通过 this.state 属性读取。当用户点击组件导致状态变化this.setState 方法就修改状态值每次修改以后自动调用 this.render 方法再次渲染组件。 由于 this.props 和 this.state 都用于描述组件的特性可能会产生混淆。一个简单的区分方法是this.props 表示那些一旦定义就不再改变的特性而 this.state 是会随着用户互动而产生变化的特性。 八、表单 用户在表单填入的内容属于用户跟组件的互动所以不能用 this.props 读取查看 demo08 。
var Input React.createClass({ getInitialState: function() { return {value: Hello!}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value this.state.value; return ( div input typetext value{value} onChange{this.handleChange} / p{value}/p /div ); } }); React.render(Input/, document.body); 上面代码中文本输入框的值不能用 this.props.value 读取而要定义一个 onChange 事件的回调函数通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况更多介绍请参考官方文档。 九、组件的生命周期 组件的生命周期分成三个状态 Mounting已插入真实 DOMUpdating正在被重新渲染Unmounting已移出真实 DOMReact 为每个状态都提供了两种处理函数will 函数在进入状态之前调用did 函数在进入状态之后调用三种状态共计五种处理函数。 componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()此外React 还提供两种特殊状态的处理函数。 componentWillReceiveProps(object nextProps)已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)组件判断是否重新渲染时调用这些方法的详细说明可以参考官方文档。下面是一个例子查看 demo09 。
var Hello React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer setInterval(function () { var opacity this.state.opacity; opacity - .05; if (opacity 0.1) { opacity 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( div style{{opacity: this.state.opacity}} Hello {this.props.name} /div ); } }); React.render( Hello nameworld/, document.body ); 上面代码在hello组件加载以后通过 componentDidMount 方法设置一个定时器每隔100毫秒就重新设置组件的透明度从而引发重新渲染。 另外组件的style属性的设置方式也值得注意不能写成
styleopacity:{this.state.opacity};而要写成
style{{opacity: this.state.opacity}} 这是因为 React 组件样式是一个对象所以第一重大括号表示这是 JavaScript 语法第二重大括号表示样式对象。 十、Ajax 组件的数据来源通常是通过 Ajax 请求从服务器获取可以使用 componentDidMount 方法设置 Ajax 请求等到请求成功再用 this.setState 方法重新渲染 UI 查看 demo10 。
var UserGist React.createClass({ getInitialState: function() { return { username: , lastGistUrl: }; }, componentDidMount: function() { $.get(this.props.source, function(result) { var lastGist result[0]; if (this.isMounted()) { this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); } }.bind(this)); }, render: function() { return ( div {this.state.username}s last gist is a href{this.state.lastGistUrl}here/a. /div ); } }); React.render( UserGist sourcehttps://api.github.com/users/octocat/gists /, document.body ); 上面代码使用 jQuery 完成 Ajax 请求这是为了便于说明。React 没有任何依赖完全可以使用其他库。 十一、参考链接 Reacts official siteReacts official examplesReact (Virtual) DOM Terminology, by Sebastian MarkbågeThe React Quick Start Guide, by Jack CallisterLearning React.js: Getting Started and Concepts, by Ken WheelerGetting started with React, by Ryan ClarkReact JS Tutorial and Guide to the Gotchas, by Justin DealReact Primer, by Binary MusejQuery versus React.js thinking, by zigomir 原文地址http://www.ruanyifeng.com/blog/2015/03/react.html转载于:https://www.cnblogs.com/LoveOrHate/p/4491413.html
