React组件（推荐，差代码）

时间 2019-11-17

标签 react 组件推荐代码栏目 React 繁體版

原文原文链接

课程地址：https://www.imooc.com/learn/944css

认识React

JSX—一种语法结构html

1、环境安装：

1.HTTP服务器

安装python3.5.2python

创建项目文件夹react_pyreact

打开teminal（windows上我安装的cmder）git

进入该目录下ajax

启动服务器命令json

python -m http.server

2.相关准备

安置须要的框架文件windows

react官方连接：https://reactjs.org/浏览器

react官方教程：https://reactjs.org/tutorial/tutorial.html服务器

在右上方git中下载最新版本的master（速度挺慢的），看例子

cdn连接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

复制上面的连接，浏览器打开，分别复制内容到新建的js文件中

附加（sublime3）下载：https://www.sublimetext.com/3

index.html为新建文件

开启浏览器：http://localhost:8000/component/index.html

说明能够跑起来了

2、组件化

1.组件化思想

引入框架到文件中

ctrl+F5刷新（F12-开发者模式，查看console控制台发现红色文字报错，警告：说明不太正规）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello react</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='browser.min.js'></script>
</head>
<body>
	<script type='text/babel'>
		ReactDOM.render(
			<h1>I am Tyler</h1>,
			document.body
		)
	</script>
</body>
</html>

挂载节点父元素-body元素，通常不要挂载在body上

2.react组件化

利用函数思想渲染页面，复杂组件由简单组件组成

作一个hello world组件：

jsx对象

增长jsx文件，经过react解析，而后dom挂载

渲染

经过react提供的creatClass组件建立，上面函数中render做用是在渲染的时候会调用下面render函数，获得jsx对象，改变dom模型，进而改变界面

Helloworld就是一个组件

使用的时候就在ReactDOM.render里面加载

显示出来

组件的优越处：可重用性

增长组件的父节点和其余兄弟节点

组件输入参数：

this指代整个HelloWorld组件对象，props是组件的数据对象，greetTarget是参数名

输入不一样参数

3.组件样式设计

pros.children

添加组件，涉及根节点

在react下class是关键字，应该使用className

react下设计逻辑和页面逻辑的整合：

把界面设计逻辑封装成一个json对象，把这个对象放在react空间的代码块里面

把界面显示属性封装在letterStyle里，删除style

把对象放到render函数里，css语法整合在js里

设置不一样颜色，组件显示的可配置化

设计复合式控件（相似调色板）：

基本框架代码

Square为上方颜色空间，Label为下方文字空间

Card为两个空间的结合，把其绘制到根节点下

Card空间装饰

4.组件实现

color变量属性

字空间的color先经过父属性传递

修改可变，空间可重用

5.组件属性的传递

react不能直接从1到5，属性也不能反向传递（子到父）

使用基本框架代码

外层组件

在外层属性

最外层设置属性值

属性传递不灵活

使用ES6 中{...}语法，属性的扩展操做符

6.组件状态机制

灵活？组件是程序的基本单位。须要存储机制-组件的状态机制

在基本框架里新建对象

增长显示样式

增长背景颜色

基本逻辑完成

了解几个js原生接口：

getInitialState——组件加载以前会被调用-初始化组件

componentDidMount——组件被浏览器加载以后，可是render函数尚未被调用以前

这里是调用定时器的最佳时期

setState——用来修改组件自己的state对象

timerTrick是个回调函数

计数开始变化

调用机制：

getInitialState初始化加载 —> componentDidMount被调用 —> 定时器开启 —> 触发上图render函数 —> 若是render里面引用了他的子组件，子组件的render也会被自动调用，会引起render函数的调用浪潮，整个界面的信息会自动发生改变 —> 使得底层数据和界面保持一致

增长界面修饰内容：

数据显示

增长属性对象

3、组件的生命周期

几个重要的生命周期函数

对应this.props

对应this.state

挂在到#container下

说明组件被框架加载到页面了

页面绘制

生命周期顺序1-组件生成

getDefaultProps —> getInitialState —> componentWillMount —> render —> componentDidmount

增长页面样式

建立子组件Counter，增长display显示属性

传递值0

变量初始化为0

增长increase函数

添加函数

shouldComponentUpdate生命周期函数

参数newPros对应的是getDefaultProps函数的rentrun对象

newStae对应的是更新好的count对象

若是返回值是true的话会继续调用，若是不是就会中止调用后续的生命周期函数

shouldComponentUpdate是个很重要的周期函数，它的逻辑关系到整个生命周期

componentWillUpdate,componentDidUpdate生命周期函数

生命周期顺序2-组件调用

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate

一个正常的生命周期流程

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (false)

5时中止调用后续

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (true) —> shouldComponentUpdate (true) —> componentWillUpdate ...

1-4时反复调用

探索更新周期

componentWillUnmount生命周期：用于结束某些组件

在shouldComponentUpdate中添加拿掉节点的react语句

生命周期顺序3-组件消亡：

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount —> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate —> shouldComponentUpdate (false) —> componentWillUnmount(定时器组件被拿掉前，作收尾处理)

comentWillReceiveProps生命周期

shouldComponentUpdate生命周期

componentWillUpdate生命周期

接下来调用render

componentDidUpdate生命周期

在组件上设置断点

点击+

继续断点，以后调用render，把相应的值绘制

生命周期顺序总结：

getDefaultProps-getInitialState-componentWillMount-componentDidMount-shouldcomponentUpadate-componentWillReceiveProps-shouldcomponentUpadate-componentWillUpdate-render-componentDidUpate