<!DOCTYPE html>

 <html>

   <head>

     <script src="../build/react.js"></script>

     <script src="../build/react-dom.js"></script>

     <script src="../build/browser.min.js"></script>

   </head>

   <body>

     <div id="example"></div>

     <script type="text/babel">

       // ** Our code goes here! **

     </script>

   </body>

 </html>

script的标签的type="text/babel"React独有的JSX的语法跟javascript不兼容

三个库文件必须首先加载react.js（核心库）,react-dom.js是提供与DOM相关的功能，browser.js的作用的是将JSX语法转为
Javascript的语法

二、最基本的用法ReactDOM.render()

 ReactDOM.render(

 <h1>hello world!!</h1>,

 document.getElementById("example")

 );

三、JSX语法

JSX的基本语法规则，遇到HTML标签（以<开头）用html规则解析
遇到代码块（以{开头）用javascript规则解析

四、组件component
React.createClass方法用于生成一个组件类

 var Hello = React.createClass({

 render: function(){

 return <h1>hello {this.props.name}</h1>

 }

 });

 ReactDOM.render(

 <Hello name="hai"/>

 document.getElementById()

 );

注意：组件类的第一个字母必须大写，否则会报错，组件类只能包含一个顶层标签否则也会报错

组件的属性可以在组件类的this.props对象上获取

添加组件属性 class属性要写成className for写成hrmlfor （因为for class是javascipt的保留字）

五、this.props.children

getDefaultProps() 方法为 props 设置默认值

this.props的对象属性与组件的属性一一对应 只有一个例外this.props.children它表示组件的所有子节点

this.props.children的值有三种可能
1.如果当前组件木有子节点undefined
2.如果有一个子节点数据类型是object
3.多个子节点的数据类型就是array所以处理this.props.children的时候要小小

六、PropTypes

组件类的PropTypes属性用来验证组件实例的属性是否符合要求

七、获取真是的DOM节点

组件并不是真是的DOM节点，而是存在与内存之中的一种数据结构叫做虚拟DOM

只有当它插入文档以后才会变成真是的dom

react的设计是先修改虚拟的dom在实际发生变化的部分，反映在真是的dom上这种算法叫做DOM diff 可以极大提高网页的性能

表现

从组件获取真实 DOM 的节点，这时就要用到 ref 属性

八、this.state
组件免不了用户互动 react的组件看成一个状态机 ，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新

渲染

getInitialState方法用于定义初始状态也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致

状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些

一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 state 来传递数据

十一、组件的生命周期

生命周期的三个状态Mounting：已插入真是DOM Updating：正在被重新渲染 Unmounting：已移出真是DOM

React为每个状态提供了两种处理函数 will函数在进入状态之前调用 did函数在进入状态之后调用

三种状态共计五种处理函数

componentWillMount（）进入状态之前插入真实DOM
componentDidMount（）进入状态之后插入真实DOM

componentWillUpdate(object nextProps,object nextState)

componentDidUpdate(object nextProps,object nextState)

componentWillUnmount()

此外两种特殊状态的处理函数

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

十一、Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功

，再用 this.setState 方法重新渲染 UI

jsx的优点
jsx执行更快（它在编译为javascript代码后进行了优化）、它的类型安全的，在编译过程中就能发现错误、使用jsx编写模板更加简单快速

可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

JSX 中不能使用 if else 语句，单可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览

器将输出 true, 如果修改 i 的值，则会输出 false

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px

注释需要写在花括号中

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离

react的新手基础知识笔记的更多相关文章

  1. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  2. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  3. Java多线程基础知识笔记（持续更新）

    多线程基础知识笔记 一.线程 1.基本概念 程序(program):是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程(process):是程序的一次执行过程,或是 ...

  4. javascript基础知识笔记-自用

    笔记内容根据个人基础知识不足不明白之处做的记录.主要看的:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 1.变量,变量的名字又叫标识符 ...

  5. 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

    前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...

  6. Mysql之基础知识笔记

    Mysql数据库基础知识个人笔记 连接本地数据库: mysql -h localhost -u root -p 回车输入数据库密码 数据库的基础操作: 查看当前所有的数据库:show database ...

  7. java基础知识-笔记整理

    1.查看已安装jdk文件路径 CMD输入java -verbose.   2.java学习提升路线 java学习视屏地址: http://www.icoolxue.com/album/show/38 ...

  8. JavaScript基础知识笔记

    做前端几年了,一直疏于整理归纳,所以这两天把基础看了一遍,加上使用经验,整理了基础知识中关键技术,旨在系统性的学习和备忘.如果发现错误,请留言提示,谢谢! 重要说明:本文只列举基础知识点,中级和高级内 ...

  9. Javascript 基础知识笔记

    标签(空格分隔): 廖老师学习笔记 javascript 基本入门 根据廖雪峰老师官网,自己看后的简单笔记 第一小节 基本知识 <script type="text/javascrip ...

随机推荐

  1. input输入框file类型第二次不触发onchange事件的解决办法，简单有效

    在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上:    解决办法:拷贝一份input标签的副本,每次选择后对原input ...

  2. MVC应用程序播放RealPlayer(rmvb)视频

    以前Insus.NET开发asp.net时,一直无法把Realplayer的rmvb格式的视频在aspx网页播放与显示.现在学习ASP.NET MVC了,再次尝试这个,望它能在MVC的应用程序运行. ...

  3. CSS 分类 选择器

      CSS:层叠样式表(英文全称:Cascading Style Sheets)         后缀名:css         标志  style         对网页中元素位置的排版进行像素级精 ...

  4. [日常] go语言圣经-声明,变量,赋值,类型,包和文件习题

    go语言圣经-声明1.四种类型的声明语句:var.const.type和func,分别对应变量.常量.类型和函数实体对象的声明2.包一级声明语句声明的名字可在整个包对应的每个源文件中访问,局部声明的名 ...

  5. (五)JMM的介绍

    1. JMM的介绍 在上一篇文章中总结了线程的状态转换和一些基本操作,对多线程已经有一点基本的认识了,如果多线程编程只有这么简单,那我们就不必费劲周折的去学习它了.在多线程中稍微不注意就会出现线程安全 ...

  6. java设计模式-----20、模板方法模式

    概念: Template Method模式也叫模板方法模式,是行为模式之一,它把具有特定步骤算法中的某些必要的处理委让给抽象方法,通过子类继承对抽象方法的不同实现改变整个算法的行为. 模板方法模式的应 ...

  7. Linux常用基本命令[find]用法(1)

    find是个很强大的命令,用法很多. 作用:查找目录下的文件,同时也可以调用其他命令执行相应的操作 用法: find [选项] [路径][操作语句] find [-H] [-L] [-P] [-D d ...

  8. PDO中的事务处理

    基本原理和步骤其实都是一样的(可参看上一篇“MySQL的事务处理”),PDO中的事务处理就是调用PDO对象的三个方法: 开启事务:beginTransaction 回滚操作:rollBack 执行操作 ...

  9. offsetTop 实现滚动条内内容定位

    js代码: var _parent_top = document.getElementsByClassName('parent')[0].offsetTop;var _phase_top = docu ...

  10. Hibernate 中配置属性详解（hibernate.properties）

    Hibernate能在各种不同环境下工作而设计的, 因此存在着大量的配置参数.多数配置参数都 有比较直观的默认值, 并有随 Hibernate一同分发的配置样例hibernate.properties ...