React

react-study-1

Posted by Zhang Tuanjie on 2019-06-30

什么是React?

  • React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，
    用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
    • 用来构建UI的 JavaScript库
    • React 不是一个 MVC 框架，仅仅是视图（V）层的库
  • React官网
  • React中文官网

React的虚拟DOM和Diff算法

  • 虚拟DOM
  • Diff算法

React中创建元素的方法

  1. React.createElement()方法,接受三个及以上的参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 参数1是一个string类型的字符串，表示要创建的元素类型
    // 参数2是一个属性对象，表示创建的这个元素上，有哪些属性
    // 参数3是元素中包裹的内容
    // 参数3后面可以放好多的虚拟DOM对象
    var el1 = React.createElement('h1',{
    	title : "我是一个h1",
    	id : 'text'
    },'我是一个大大的h1');

    var el2 = React.createElement('div',null,'这是一个div',el1);

  2. 使用JSX语法创建元素

    • JSX语法的本质：还是以 React.createElement 的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上；
    • 如果要在 JSX 语法内部，书写 JS 代码了，那么，所有的JS代码，必须写到 {} 内部；
    • 在JSX中，如果要为元素添加class属性了，那么，必须写成className，因为 class在ES6中是一个关键字；
      和class类似，label标签的 for 属性需要替换为 htmlFor.
    • 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
    • 当 编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，
      如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；
    • 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
1
2
let msg = '我是通过JSX语法创建的元素';
let h1 = <h1 className="content">{msg}</h1>;

创建组建的方法

  1. 基于class关键字创建组件
1
2
3
4
5
6
7
8
9
10
class Person extends React.Component{
	// 在class创建的组件中，必须定义一个render函数
	render(){
		// 在render函数中，必须返回一个null或者符合规范的虚拟DOM元素
		// 注意： 必须要返回一个根节点
		return <div>
			<h1>这是用 class 关键字创建的组件！</h1>
		</div>;
	}
}
  1. 使用构造函数创建组件
1
2
3
function App(props){
	return <div>{props.name}-----{props.address}</div>
}

  • 注意

    1. 组件类必须首字母大写
    2. 返回的DOM元素必须只有一个根元素并且必须有结束标签

  • 两种创建组件方式的区别

    1. function构造函数创建的组件，内部没有 state 私有数据，只有 一个 props 来接收外界传递过来的数据；
    2. class关键字创建的组件，内部，除了有 this.props 这个只读属性之外，还有一个 专门用于 存放自己私有数据的 this.state 属性，这个 state 是可读可写的！

  • 有状态组件和无状态组件

    • 使用 function 创建的组件，叫做【无状态组件】；使用 class 创建的组件，叫做【有状态组件】
    • 有状态组件和无状态组件区别：有无 state 属性；
      • 同时， class 创建的组件，自己的生命周期函数，但是，function 创建的 组件，没有自己的生命周期函数；
    • 什么时候使用 有状态组件，什么时候使用无状态组件呢？？？
      • 如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件
      • 如果一个组件，只需要根据外界传递过来的 props，渲染固定的 页面结构就完事儿了，此时，非常适合使用 function 创建出来的 无状态组件
    • 由于剔除了组件的生命周期，所以，无状态组件的运行速度会快一点

使用 ReactDOM 把元素渲染到页面指定的容器中：

语法： ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置中')
注意： ReactDOM.render() 方法的第二个参数，和vue不一样，不接受 "#root" 这样的字符串，而是需要传递一个 原生的 DOM 对象
1
ReactDOM.render(h1, document.getElementById('root'));



Tags
React
FRIENDS