react入门学习笔记（一）
|
这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了。选择react的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。 在官网文档做了简单了解之后我，我想作为初学者首先还是从react基本知识了解，当然其中涉及到JSX语法和ES6的相关知识，这些我没有太深入了解，毕竟还是要跟着学习react的主线来走的，跟着官方给的例子，大致了解用法就行，这个不难实现。至于网上说的react全家桶之类的，作为初学者，我暂时也是没去理会的。多说无益，接下来开始react的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。 一、react在实际开发中能给我们带来什么样的便捷 学一个新的库或者新的框架，我总是先联合实际，明白了我将要学习的东西能给我带来什么，我才能有目的地去学习。不知道大家是否也是一样。react主要是针对前端UI的组件化开发。就是前端的一个页面包括Header,Content,footer,等等元素都可以是react里面的一个组件，可以多次重复使用。如果大家做过页面开发就知道，固然有bootstrap这样的布局神器，为我们搭建网页节省了不少时间，但是想要做到一个组件的多次重复使用依然是很难的。所以react正是来解决这个问题的，至于如何解决相信往下看了实际的例子就能明白了。 二、学习react需要了解的一些概念 1、react的安装 <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元素也可以用来表示组件
//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、组件怎么显示到页面上去 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、组件可以包含子组件，从而构建一个大的组件 <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事件处理
其次还需要了解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>
写文章不易，主要是作为自己学习的笔记，又恐有遗漏不对的地方误导了像我一样的初学者。内心惶恐啊，所以如有不对的地方还望大家指正，我必然及时更正。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |