react 系统学习-笔记

第1章：React入门

1. 1. React的基本认识
      1. 官网
2. 英文官网: https://reactjs.org/
3. 中文官网: https://doc.react-china.org/
   1. 1. 介绍描述

1. 用于构建用户界面的 JavaScript 库(只关注于View)
2. 由Facebook开源
   1. 1. React的特点

1. Declarative(声明式编码)
2. Component-Based(组件化编码)
3. Learn Once, Write Anywhere(支持客户端与服务器渲染)
4. 高效
5. 单向数据流
   1. 1. React高效的原因

1. 虚拟(virtual)DOM, 不总是直接操作DOM
2. DOM Diff算法, 最小化页面重绘
   1. React的基本使用

注意: 此时只是测试语法使用, 并不是真实项目开发使用

1. 1. 1. 效果

 

1. 1. 1. 相关js库
2. react.js: React的核心库
3. react-dom.js: 提供操作DOM的react扩展库
4. babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
   1. 1. 在页面中导入js

<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>

 

1. 1. 1. 编码

<script type="text/babel"> //必须声明babel   // 创建虚拟DOM元素   const vDom = <h1>Hello React</h1> // 千万不要加引号   // 渲染虚拟DOM到页面真实DOM容器中   ReactDOM.render(vDom, document.getElementById('test')) </script>

1. 1. 1. 使用React开发者工具调试

1. 1. React JSX
      1. 效果

1. 1. 1. 虚拟DOM
2. React提供了一些API来创建一种 `特别` 的一般js对象
   1. var element = React.createElement('h1', {id:'myTitle'},'hello')
   2. 上面创建的就是一个简单的虚拟DOM对象
3. 虚拟DOM对象最终都会被React转换为真实的DOM
4. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
   1. 1. JSX

1. 全称:  JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: XML+JS
3. 作用: 用来创建react虚拟DOM(元素)对象
   1. var ele = <h1>Hello JSX!</h1>
   2. 注意1: 它不是字符串, 也不是HTML/XML标签
   3. 注意2: 它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则
   1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
   2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
7. babel.js的作用
   1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
   2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

 

1. 1. 1. 渲染虚拟DOM(元素)
2. 语法:  ReactDOM.render(virtualDOM, containerDOM)
3. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
4. 参数说明
   1. 参数一: 纯js或jsx创建的虚拟dom对象
   2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
      1. 建虚拟DOM的2种方式

1. 纯JS(一般不用)

React.createElement('h1',  {id:'myTitle'},  title)

1. JSX:

<h1 id='myTitle'>{title}</h1>

1. 1. 1. JSX练习

需求: 动态展示列表数据

1. 1. 模块与组件和模块化与组件化的理解
      1. 模块
2. 理解: 向外提供特定功能的js程序, 一般就是一个js文件
3. 为什么:  js代码更多更复杂
4. 作用: 复用js, 简化js的编写, 提高js运行效率
   1. 1. 组件

1. 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
2. 为什么: 一个界面的功能更复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率
   1. 1. 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

1. 1. 1. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

第2章：React面向组件编程

2.1. 基本理解和使用

2.1.1. 效果

2.1.2. 自定义组件(Component) :

1. 定义组件(2种方式)

   

/*方式1: 工厂函数组件(简单组件)*/ function MyComponent () {   return <h2>工厂函数组件(简单组件)</h2> }   /*方式2:  ES6类组件(复杂组件)*/ class MyComponent2 extends React.Component {   render () {     console.log(this) // MyComponent2的实例对象     return <h2>ES6类组件(复杂组件)</h2>   } }

 

1. 渲染组件标签

ReactDOM.render(<MyComponent />, document.getElementById('example1'))

 

2.1.3. 注意

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

2.1.4. render()渲染组件标签的基本流程

1. React内部会创建组件实例对象
2. 得到包含的虚拟DOM并解析为真实DOM
3. 插入到指定的页面元素内部

2.2. 组件三大属性1: state

2.2.1. 效果

2.2.2. 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.3. 编码操作

1. 初始化状态:

  constructor (props) {

    super(props)

    this.state = {

      stateProp1 : value1,

      stateProp2 : value2

    }

  }

1. 读取某个状态值

  this.state.statePropertyName

1. 更新状态---->组件界面更新

  this.setState({

    stateProp1 : value1,

    stateProp2 : value2

  })