目录
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 的区别?
5 react项目开发步骤推荐
有了项目的梗概,我们要做的第一件事情不是写代码,而是画一个简单的原型图,将不同的功能可视化的展示出来。
- 先画出项目的 Mokeup 图
- 将 Mokeup 图划分为不同的组件
- 实现静态版本的程序和组件
- 将静态版本的组件组合起来
- 考虑 state 的组成
- 交互组件的设计。包含内容CRUD(增删查改);状态切换的实现
- 最终版本
其中对于项目的目录结构,推荐如下
转自:歌特式灵魂摆渡人 的https://www.jianshu.com/p/eb7d518b05b8
自己想法:每个路由的界面可以做一个容器。
6 webpack 的特色与功能
特点:
- 按需异步加载,极大地提升大规模页面应用的初始加载速度
- 智能的静态分析。既不是加载与执行时同步的(在网络请求的事件不可忽视情况下,请求时会阻塞JavaScript的执行),也支持简单的不含变量的表达式。
- 模块热替换功能。
功能:
- loader 是作用于应用中资源文件的转换行为。是函数,接受资源文件的源码作为参数,并返回新的代码。
- plugin (插件)是另外一种扩展 webpack 能力的方式,与loader 专注于资源内容的转换不同,plugin 的功能范围更广,也更为灵活强大。plugin 可以看做是为了实现哪些loader实现不了或者不适合在loader 中实现的功能。