这两天得空,特意来折腾了以下时下火热的前端框架react,至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论,也就不妄加评论了。选择react的主要原因大概是因为该框架出现较早,感觉上会相对成熟,日后学习中遇到问题想要查找答案相对简单一些,对,就是这么简单。
在官网文档做了简单了解之后我,我想作为初学者首先还是从react基本知识了解,当然其中涉及到JSX语法和ES6的相关知识,这些我没有太深入了解,毕竟还是要跟着学习react的主线来走的,跟着官方给的例子,大致了解用法就行,这个不难实现。至于网上说的react全家桶之类的,作为初学者,我暂时也是没去理会的。多说无益,接下来开始react的学习,我按照我学习中带着的问题来一一解答,完成我的入门笔记。
一、react在实际开发中能给我们带来什么样的便捷
学一个新的库或者新的框架,我总是先联合实际,明白了我将要学习的东西能给我带来什么,我才能有目的地去学习。不知道大家是否也是一样。react主要是针对前端UI的组件化开发。就是前端的一个页面包括Header,Content,footer,等等元素都可以是react里面的一个组件,可以多次重复使用。如果大家做过页面开发就知道,固然有bootstrap这样的布局神器,为我们搭建网页节省了不少时间,但是想要做到一个组件的多次重复使用依然是很难的。所以react正是来解决这个问题的,至于如何解决相信往下看了实际的例子就能明白了。
二、学习react需要了解的一些概念
1、react的安装
本人最忌麻烦,所以没有从react官网下载文件,直接用的网上的资源,一心一意写dome,本文的例子引用下面三个文件就可以了:
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
2、react中的最小单元组件的概念、创建方式
组件是react中用于呈现到页面的元素,组件可大可小,下面是我所知道的四种创建方法:
/* * 组件定义方法一 */ //react元素也可以用来表示组件 //const element = <h1>Hello World</h1> // ReactDOM.render( // element,// document.getElementById('example') // ); /* * 组件定义方法二 */ //定义组件最简单的方法就是定义一个javascript函数 // function Welcome(props){ // return <h1>Hello {props.name}</h1>; // } // const element = <Welcome name="huanglw" /> // ReactDOM.render( // element,// document.getElementById('example') // ); /* * 方法三 */ //ES6类来定义一个组件 // class Welcome extends React.Component { // render() { // return <h1>Hello,{this.props.name}</h1>; // } // } // ReactDOM.render( // <Welcome name="huanglw" />,// document.getElementById('example') // ); /* * 方法四 */ //react自带的创建组件的方法 var Welcome = React.createClass ({ render:function(){ return <h1>Hello,{this.props.name}</h1>; } }); ReactDOM.render( <Welcome name="huanglw" />,document.getElementById('example') );
下面这张关于JSX对象的对应关系的图片需要了解一下,有助于理解代码:
3、组件怎么显示到页面上去
组件要显示到页面上去就要提及react中最重要的方法ReactDOM.render()方法了,通过该方法将react元素渲染到页面中指定的DOM节点中去:
const element = <h1>Hello,world</h1>; ReactDOM.render( element,//此处只能用原生方法获取DOM节点,不可用jq方法 document.getElementById('root') );
4、组件更新
组件也可以更新,下面例子是一个实时更新显示当前时间的组件
<script type="text/babel"> function tick(){ const element = ( //相邻的JSX元素必须包裹早封闭的标签中,如果没有<div>标签会报语法错误 <div> <h1>Hello World</h1> <h2>This is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element,document.getElementById('example') ); } //setInterval("tick()",1000); setInterval(tick,1000); </script>
5、组件可以包含子组件,从而构建一个大的组件
组件可大可小,一个大的组件可以拆分成很多小的组件,一个个小的组件可以通过层层包含构成一个大的组件甚至应用,并且各个小组件都是相互独立的,可多次复用,这也是react的重要思想之一吧!
<script type="text/babel"> //这是定义好了的一个组件 function Welcome(props){ return <h1>Hello {props.name}</h1>; } //这是另外一个组件,并且可以引用组件Welcome function App(){ return ( <div> <Welcome name="Jack" /> <Welcome name="Sara" /> <Welcome name="Rose" /> </div> ) } ReactDOM.render( <App />,document.getElementById('example') ); </script>
6、react事件处理
首先需要了解以下js的bind的用法和箭头函数。
其次还需要了解ES6的相关语法,由于我自身也还在学习,所以不敢深入讲解,主要讲讲reac事件处理中主要可以设置组件的初始状态,以及一些点击事件什么的设定。具体例子可以看官网文档,我自知对这章理解不深。所以ES6的知识提前掌握还是比较好的。
7、react实现一个评论模块
<script type="text/jsx"> var data = [ {author: "Pete Hunt",text: "This is one comment"},{author: "Jordan Walke",text: "This is *another* comment"},{author: "Huanglw",text: "I like JavaScript"} ]; // 创建React组件 var CommentBox = React.createClass({ // 在组件的生命周期中仅执行一次,用于设置初始状态 getInitialState: function() { return {data: []}; },onCommentSubmit: function(comment) { data.push(comment); var self = this; setTimeout(function() { // 动态更新state self.setState({data: data}); },500); },// 当组件render完成后自动被调用 componentDidMount: function() { var self = this; setTimeout(function() { // 动态更新state self.setState({data: data}); },2000); },render: function() { return ( // 并非是真正的DOM元素,是React的div组件,默认具有XSS保护 <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.onCommentSubmit} /> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function(comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { // 通过this.props.children访问元素的子元素 var rawHtml = converter.makeHtml(this.props.children.toString()); return ( // 通过this.props访问元素的属性 // 不转义,直接插入纯HTML <div className="comment"> <h2 className="commentAuthor">{this.props.author}</h2> <span dangerouslySetInnerHTML={{__html: rawHtml}} /> </div> ); } }); var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); // e.returnValue = false; var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim(); if(!text || !author) return; this.props.onCommentSubmit({author: author,text: text}); // 获取原生DOM元素 this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; },render: function() { return ( // 为元素添加submit事件处理程序 // 用ref为子组件命名,并可以在this.refs中引用 <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author"/> <input type="text" placeholder="Say something..." ref="text"/> <input type="submit" value="Post"/> </form> ); } }); // render方法创建组件的根元素,并注入到DOM元素中(第二个参数) React.render( <CommentBox />,document.getElementById('content') ); </script>
写文章不易,主要是作为自己学习的笔记,又恐有遗漏不对的地方误导了像我一样的初学者。内心惶恐啊,所以如有不对的地方还望大家指正,我必然及时更正。