React知识点小结

react Dom与JSX关系

react页面渲染，由三部分构成：state 数据 + JSX模版 => 真实Dom(显示)

正常react渲染页面的步骤

1. 页面首次加载：state 数据 + JSX模版 => 真实dom显示
2. 页面改变：state 数据改变
3. state + JSX模版重新生成 Dom 替换原始Dom 显示

react改进方式一:

1. 页面首次加载：state 数据 + JSX模版 => 真实dom显示
2. 页面改变：state 数据改变
3. state + JSX模版重新生成新的Dom 但是不直接替换原始Dom 显示
4. 将新的Dom和老的Dom做比对，找出差异
5. 将新的Dom中修改的部分 替换到老的Dom中

react改进方式二(也是目前react实现的方式)：

1. 页面首次加载：state 数据 + JSX模版 => 生成虚拟Dom(JS对象) => 生成真实dom显示

//虚拟Dom
['div',{id:'id1'},['span',{},'hello']]
//真实Dom
<div>
  <span>hello2</span>
</div>

2. 页面改变：state 数据改变
3. 生成新的虚拟Dom，(即一个JS对象，用它来翻译成真实Dom)

//虚拟Dom
['div',{id:'id1'},['span',{},'hello2']]

4. 比对两个虚拟Dom(两个JS对象比对)，更改虚拟 Dom值

['div',{id:'id1'},['span',{},'hello2']]

5. 由更改后的虚拟Dom重新生成 真实Dom显示

<div>
  <span>hello2</span>
</div>

改进方式二的优势：

1. 操作都是JS对象，减少来对Dom的创建和比对。JS对象在js中比较替换是直接操控JS自身对象(Diff 算法)，性能消耗比较小，若是 生成新的Dom对象及对Dom对象的比对，需要操作系统的application的方法，性能消耗大。
2. 若两次setState时间较短，react会对比两次JS对象，最后只重新生成一次Dom

Diff 算法 -- 层层比对，父级相同则比对child，若child不同，直接替换，后续child不进行比对了。算法简单，因此比对速度快。因此在循环中key，尽量别使用index，这样就会使每次的循环都不能复用之前的index对象。引入Key值的原因就是为了提高虚拟Dom比对性能

ref 使用

// 1. 直接赋值
<input ref={(inputValue)=>{this.inputValue = inputValue}}> </input>
//使用:
console.log(this.inputValue.value);
 // 2. 
<input ref="inputValue"> </input>
//使用:
console.log(this.refs.inputValue.value);

ref的使用可以由以上两种方法, 但是react并不推荐大量使用ref,建议用数据驱动的方式操作Dom。
例如：利用ref的方式获取dom，在和setState同时使用会出问题：因为SetState是异步的，直接通过ref获取Dom节点从而取得的值可能不是最新的值。解决方案：setState后第二个参数里执行：

this.setState({
                dataList: tempList,
            }, ()=> {
                console.log(this.refs.inputValue.value);
            })

react 路由

• 路由分为三种：静态路由：urlPath不同跳转不同页面；动态路由：页面之间跳转定义参数类型; get路由：页面之间跳转，和get请求一样方便传多个参数，一般用 cnpm install url --save 使用URL库进行参数解析， 本文样例Demo中有使用例子

路由类型	路由注册	路由跳转	路由接收
静态路由	<Route exact path="/" component={RouterHome} />	<Link to="/">Home</Link>	-
动态路由	<Route path="/RouterContent/:myParams" component={RouteContent} />	<Link to={`/RouterContent/${value}`}> {value} </Link>	this.props.match.params.myParams
get路由	<Route path="/RouterContent" component={RouteContent} />	<Link to={`/RouterContent?aid=${value}`}>{value}</Link>	this.props.location.search

ant Design 使用

css 入门补充小知识

1. ID选择符，调用的时候需要 <p id='bold'> </p>

// csss:
p#bold {
    color: red;
}
//js:
<p id='bold'>
          这个段落应该是粗体
</p>

2. 群选择符

/*群选择符, 表示同时对逗号分割对标签操作*/
p,h1,h2 {
    text-align: center;
}

• inherit: 继承父级的上层属性
• background-attachment: fixed 背景图片是否跟着网页滑动
• font-style : 是否斜体，oblique italic normal
• font-weight: 字体粗细，font-size：字体大小
• line-height: 行与行间距。
• font-variant: 全部大小写，但是首字母的大写会更大些
• text-indent: 文本首行缩进，px或者%
• text-align: 文本对齐
• text-decoration: 上滑线，下划线，删除线
• text-transform: 首字母大写，变大写，变小写
• :link: 设置未访问链接属性，:visited 设置访问过链接属性，:active 鼠标点击与释放，:hover 鼠标悬停时
• float: left,right // 向哪个方向浮动
• display:
  display: flex; //将对象作为弹性伸缩盒显示
  display: block;//block是一块状元素的方式显示
• position:
  static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
  relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
  absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
  fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
• display: flex ， Flex 布局以后，子元素的float、clear和vertical-align属性将失效 。更多flex布局参考 阮一峰flex布局教程

flex容器(父组件)属性名	枚举值	备注
flex-direction	row、row-reverse、column 、column-reverse	布局方向： ➡️、 ⬅️ 、⬇️、⬇️
flex-wrap	nowrap、wrap、wrap-reverse	不换行、换行(第一行在最上方)、换行(第一行在最下方)
flex-flow	<flex-direction>	direction和wrap，都可以设置
justify-content	flex-start、flex-end、center、space-between、space-around	居左、居右、居中、两边对齐、均分间隔相等
align-items	flex-start、flex-end、center、baseline、stretch	项目的第一行文字的基线对齐 、 默认值
align-content	flex-start、flex-end、center、space-between 、space-around	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex项目(子组件)属性名	枚举值	备注
order	<integer>	项目排列顺序。从0开始数字越小越靠前
flex-grow	<number>	放大比例，默认为0 不放大
flex-shrink	<number>	缩小比例，默认为1，若空间不足，所有项目都将缩小
flex-basis	<length>	跟width、height一样，占据固定空间
flex	<flex-grow, flex-shrink> || <flex-basis>都可设置	flex：分数百分数多个数
align-self	auto、flex-start、flex-end、center、baseline、stretch	单个子组件和其他子组件不同对齐方式，覆盖align-items：--_-

css 冲突

• 更具体的，听从最具体的样式， id > 类别 > 元素
• 两个层级样式表，遵循离内容比较近的样式
• !important ，申明指示的位置优先，帮助诊断是否冲突
• 选择符，
• 元素

本文样例Demo