react学习总结

目录

 

1 react生命周期​

2 关于组件 className 设置的问题

3 react 中实现一些动画的效果

4 encodeURIComponent() 

5 react项目开发步骤推荐

6 webpack 的特色与功能

---

1 react生命周期

react 组件的生命周期整个过程如下：

2 关于组件 className 设置的问题

对于自定义的组件，如果在组件引入的地方设置 className ，就操作不了内部的元素的样式。这种情况只能在组件定义的方法设置 className，这样才能操作内部的样式的样式。

如下不能操控 内部 ul 和 div 的样式

//子组件
import React, { Component } from 'react';

class Son extends Component {
	render() {
		return (
			<div>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div></div>
			</div>
		);
	}
}
export default Son;

//父组件
import React, { Component } from 'react';
import Son from "./son";

class Parent extends Component {
	render() {
		return (
			<div>
				<Son className = "son"></Son>
			</div>
		);
	}
}
export default Parent;

而将 className 设置在子组件中，这样才能操控 内部元素的样式

//子组件
import React, { Component } from 'react';

class Son extends Component {
	render() {
		return (
			<div className="son">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div></div>
			</div>
		);
	}
}
export default Son;

//父组件
import React, { Component } from 'react';
import Son from "./son";

class Parent extends Component {
	render() {
		return (
			<div>
				<Son></Son>
			</div>
		);
	}
}
export default Parent;

3 react 中实现一些动画的效果

项目中遇到了一些要实现简单的动态过渡效果，但是又找不多合适的 UI 组件，所以就自己按照一些帖子的方法做了。

https://www.jb51.net/article/94932.htm

我用到手风琴效果的 关键点：

• 元素样式的 transition : height 1s;
• 组件下使用不同的类名来进行元素的样式切换。

<div className={"content "+(this.props.active ? "full" : "")}> </div>

我用的组件是 antd 提供的，样式使用 css modules 实现的，应该是

<div className={ [styles["content"], (this.props.active ? "full" : "")].join(" ") }> </div>

4 encodeURIComponent() 

可以把字符串 作为 URI 组件进行编码。

为什么要这么做：防止key或者value 中存在歧义，如某个 value 值是 sqrt=1。

encodeURI 与 encodeURIComponent 的区别？

• encodeURI 是对整个URI进行操作
• encodeURIComponent() 是对部分的URI 进行操作。或者说是某个URI 组件进行操作。
• JavaScript encodeURIComponent() 函数
• 为什么要进行URL编码 - 降瑞雪 - 博客园

5 react项目开发步骤推荐

有了项目的梗概，我们要做的第一件事情不是写代码，而是画一个简单的原型图，将不同的功能可视化的展示出来。

1. 先画出项目的 Mokeup 图
2. 将 Mokeup 图划分为不同的组件
3. 实现静态版本的程序和组件
4. 将静态版本的组件组合起来
5. 考虑 state 的组成
6. 交互组件的设计。包含内容CRUD（增删查改）；状态切换的实现
7. 最终版本

其中对于项目的目录结构，推荐如下

转自：歌特式灵魂摆渡人 的https://www.jianshu.com/p/eb7d518b05b8

自己想法：每个路由的界面可以做一个容器。

6 webpack 的特色与功能

特点：

• 按需异步加载，极大地提升大规模页面应用的初始加载速度
• 智能的静态分析。既不是加载与执行时同步的（在网络请求的事件不可忽视情况下，请求时会阻塞JavaScript的执行），也支持简单的不含变量的表达式。
• 模块热替换功能。

功能：

• loader 是作用于应用中资源文件的转换行为。是函数，接受资源文件的源码作为参数，并返回新的代码。
• plugin （插件）是另外一种扩展 webpack 能力的方式，与loader 专注于资源内容的转换不同，plugin 的功能范围更广，也更为灵活强大。plugin 可以看做是为了实现哪些loader实现不了或者不适合在loader 中实现的功能。