react入门学习笔记（一）

时间 2019-11-06

标签 react 入门学习笔记栏目 React 繁體版

原文原文链接

这两天得空，特地来折腾了如下时下火热的前端框架react，至于为何选react,做为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了。选择react的主要缘由大概是由于该框架出现较早，感受上会相对成熟，往后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。javascript

在官网文档作了简单了解以后我，我想做为初学者首先仍是从react基本知识了解，固然其中涉及到JSX语法和ES6的相关知识，这些我没有太深刻了解，毕竟仍是要跟着学习react的主线来走的，跟着官方给的例子，大体了解用法就行，这个不难实现。至于网上说的react全家桶之类的，做为初学者，我暂时也是没去理会的。多说无益，接下来开始react的学习，我按照我学习中带着的问题来一一解答，完成个人入门笔记。css

1、react在实际开发中能给咱们带来什么样的便捷html

学一个新的库或者新的框架，我老是先联合实际，明白了我将要学习的东西能给我带来什么，我才能有目的地去学习。不知道你们是否也是同样。react主要是针对前端UI的组件化开发。就是前端的一个页面包括Header,Content,footer,等等元素均可以是react里面的一个组件，能够屡次重复使用。若是你们作过页面开发就知道，当然有bootstrap这样的布局神器，为咱们搭建网页节省了很多时间，可是想要作到一个组件的屡次重复使用依然是很难的。因此react正是来解决这个问题的，至于如何解决相信往下看了实际的例子就能明白了。前端

2、学习react须要了解的一些概念vue

一、react的安装
本人最忌麻烦，因此没有从react官网下载文件，直接用的网上的资源，一心一意写dome，本文的例子引用下面三个文件就能够了：java

<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>

二、react中的最小单元组件的概念、建立方式
组件是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对象的对应关系的图片须要了解一下，有助于理解代码：bootstrap

三、组件怎么显示到页面上去
组件要显示到页面上去就要说起react中最重要的方法ReactDOM.render()方法了，经过该方法将react元素渲染到页面中指定的DOM节点中去：前端框架

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  //此处只能用原生方法获取DOM节点，不可用jq方法
  document.getElementById('root')
);

四、组件更新
组件也能够更新，下面例子是一个实时更新显示当前时间的组件babel

<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>

五、组件能够包含子组件，从而构建一个大的组件
组件可大可小，一个大的组件能够拆分红不少小的组件，一个个小的组件能够经过层层包含构成一个大的组件甚至应用，而且各个小组件都是相互独立的，可屡次复用，这也是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>

六、react事件处理
首先须要了解如下js的bind的用法和箭头函数。

其次还须要了解ES6的相关语法，因为我自身也还在学习，因此不敢深刻讲解，主要讲讲reac事件处理中主要能够设置组件的初始状态，以及一些点击事件什么的设定。具体例子能够看官网文档，我自知对这章理解不深。因此ES6的知识提早掌握仍是比较好的。

七、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>

写文章不易，主要是做为本身学习的笔记，又恐有遗漏不对的地方误导了像我同样的初学者。心里惶恐啊，因此若有不对的地方还望你们指正，我必然及时更正。