react入门学习笔记（一）

leon 发布于2019-08-20 18:01 / 1524人阅读

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。

这两天得空，特意来折腾了以下时下火热的前端框架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，本文的例子引用下面三个文件就可以了：

2、react中的最小单元组件的概念、创建方式
组件是react中用于呈现到页面的元素，组件可大可小，下面是我所知道的四种创建方法：

/*
   * 组件定义方法一
   */
  //react元素也可以用来表示组件
  //const element = Hello World
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 组件定义方法二
   */
  //定义组件最简单的方法就是定义一个javascript函数
  // function Welcome(props){
  //   return Hello {props.name};
  // }
  // const element = 
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 方法三
   */
  //ES6类来定义一个组件
  // class Welcome extends React.Component {
  //   render() {
  //     return Hello, {this.props.name};
  //   }
  // }
  // ReactDOM.render(
  //   ,
  //   document.getElementById("example")
  // );

  /*
   * 方法四
   */
  //react自带的创建组件的方法
  var Welcome = React.createClass ({
    render:function(){
      return Hello, {this.props.name};
    }
  });
  ReactDOM.render(
    ,
    document.getElementById("example")
  );

下面这张关于JSX对象的对应关系的图片需要了解一下，有助于理解代码：

3、组件怎么显示到页面上去
组件要显示到页面上去就要提及react中最重要的方法ReactDOM.render()方法了，通过该方法将react元素渲染到页面中指定的DOM节点中去：

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

4、组件更新
组件也可以更新，下面例子是一个实时更新显示当前时间的组件

5、组件可以包含子组件，从而构建一个大的组件
组件可大可小，一个大的组件可以拆分成很多小的组件，一个个小的组件可以通过层层包含构成一个大的组件甚至应用，并且各个小组件都是相互独立的，可多次复用，这也是react的重要思想之一吧！

6、react事件处理
首先需要了解以下js的bind的用法和箭头函数。

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

7、react实现一个评论模块

写文章不易，主要是作为自己学习的笔记，又恐有遗漏不对的地方误导了像我一样的初学者。内心惶恐啊，所以如有不对的地方还望大家指正，我必然及时更正。

GPU云服务器云服务器学习笔记一 java开发入门笔记学习笔记基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84015.html

React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
Flux架构小白入门笔记

摘要：架构小白入门笔记是提出的一种处理前端数据的架构，学习就是学习它的思想。这个笔记是我在学习了阮一峰老师的架构入门教程之后得出，里面的例子和部分原文来自于其不同在于我用将其改写了，并加入了注释。 Flux架构小白入门笔记 Flux是facebook提出的一种处理前端数据的架构，学习Flux就是学习它的思想。这个笔记是我在学习了阮一峰老师的Flux 架构入门教程之后得出，里面的例子和部分原...

lily_wang 2019-08-22 10:45 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
AI开发书籍分享

摘要：编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章，随着不断的学习，也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享，先分享一部分的编程书籍的整理和收集最近一直在学习deep learning深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...

huayeluoliuhen 2019-06-26 18:18 评论0 收藏0