React学习

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_34319374

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 测试 ViewUI

原文链接：https://juejin.im/post/5ce8978ae51d4510a37bab72

来自facebook，2013年诞生
只专注提供清晰，直接的视图层解决方案
他的功能全部以构建视图为核心
并提供类似控制器的函数接口和生命周期函数
在react中没有控制器、没有服务、没有指令、没有过滤器等等，有的只有视图，有路由。

react非常轻，Angular非常重，非常庞大，只提供组件化相关的非常少量的api。简化了一切可以简化的东西。

React可以搭配Flux等架构（Redux实现）使用。
有Flux架构护航，数据的单向流动，自称是比MVC，MVVM更高一级的模式。
React 使用jsx语法糖

浏览器工作流
创建DOM树
一旦浏览器接收到一个HTML文件，渲染引擎（render engine）就开始解析它，并根据HTML元素（elements）一一对应地生成DOM 节点（nodes），组成一棵DOM树。

创建渲染树
同时，浏览器也会解析来自外部CSS文件和元素上的inline样式。通常浏览器会为这些样式信息，连同包含样式信息的DOM树上的节点，再创建另外一个树，一般被称作渲染树（render tree）

创建渲染树背后的故事
WebKit内核的浏览器上，处理一个节点的样式的过程称为attachment。DOM树上的每个节点都有一个attach方法，它接收计算好的样式信息，返回一个render对象（又名renderer） Attachment的过程是同步的，新节点插入DOM树时，会调用新节点的attach方法。构建渲染树时，由于包含了这些render对象，每个render对象都需要计算视觉属性（visual properties）；这个过程通过计算每个元素的样式属性来完成。

布局 Layout
又被简称为Reflow[2] 构造了渲染树以后，浏览器引擎开始着手布局（layout）。布局时，渲染树上的每个节点根据其在屏幕上应该出现的精确位置，分配一组屏幕坐标值。

绘制 Painting
接着，浏览器将会通过遍历渲染树，调用每个节点的paint方法来绘制这些render对象。paint方法根据浏览器平台，使用不同的UI后端API（agnostic UI backend API）。通过绘制，最终将在屏幕上展示内容。

Virtual DOM技术
DOM操作真正的问题在于每次操作都会触发布局的改变、DOM树的修改和渲染。所以，当你一个接一个地去修改30个节点的时候，就会引起30次（潜在的）布局重算，30次（潜在的）重绘，等等。 Virtual DOM 实际上没有使用什么全新的技术，仅仅是把 “ 双缓冲（double buffering）” 技术应用到了DOM上面。
这样一来，当你在这个单独的虚拟的DOM树上也一个接一个地修改30个节点的时候，它不会每次都去触发重绘，所以修改节点的开销就变小了。
之后，一旦你要把这些改动传递给真实DOM，之前所有的改动就会整合成一次DOM操作。这一次DOM操作引起的布局计算和重绘可能会更大，但是相比而言，整合起来的改动只做一次，减少了（多次）计算。不过，实际上不借助Virtual DOM也可以做到这一点。你可以自己手动地整合所有的DOM操作到一个DOM 碎片（DOM fragment）里，然后再传递给DOM树。

Virtual DOM到底解决了什么问题。
首先，它把管理DOM碎片这件事情自动化、抽象化了，使得你无需再去手动处理。另外，当你要手动去做这件事情的时候，你还得记得哪些部分变化了，哪些部分没变，毕竟之后重绘时，DOM树上的大量细节你都不需要重新刷新。这时候Virtual
DOM的自动化对你来说就非常有用了，如果它的实现是正确的，那么它就会知道到底哪些地方应该需要刷新，哪些地方不要。
最后，Virtual DOM通过各种组件和你写的一些代码来请求对它进行操作，而不是直接对它本身进行操作，使你不必非要跟Virtual DOM交互，也不必非要去了解Virtual
DOM修改DOM树的原理，也就不用再想着去修改DOM了。对开发者来说，Virtual DOM几乎是完全透明的。这样你就不用在修改DOM 和整合DOM操作为一次之间做同步处理了。

Virtual DOM的核心就是计算。

1.React要求自定义组件必须是大写字母开头，小写会被当做默认DOM元素来渲染。
2.React要求自定义组件必须继承React.Component类。
3.jsx不能直接运行，是被babel-loader中的react这个preset翻译的:
4.标签必须关闭，class要写成className ,for要写成htmlFor。
5.html注释不能使用，只能使用js注释。
6.原生标签比如p、li、div如果要使用自定义属性，必须使用data-前缀。

react列表自增序号问题：

      { title: '序号', dataIndex: 'id', key: 'id',
        render: (text,record,index)=>(index+1)
      }
复制代码

react对于页面动态元素的问题。
显示的时候以数组的方式循环显示。

当增加一个元素的时候，往数组里面增加值。
当删除的时候通过数组的filter过滤掉传进来的index，删除掉过滤掉的数据。
contactPeopleListTemp = contactPeopleListTemp.filter((item,_index) => index !== _index);
map一般做修改操作，转换后数组大小是一致的，filter是做删除操作，元素个数可以减少。

问题1 函数参数为什么可以不一致。


              <Select style={{width: 200}}
                        value={status}
                        onChange={this.handleChange.bind(this)}>
                  <Option value="">请选择</Option>
                  <Option value="0">a</Option>
                  <Option value="1">b</Option>
                  <Option value="2">c</Option>
                </Select>
                
             handleChange = (value, option = null) => {
                console.table(['111',value]);
                let statusTarget = value;
                this.setState({status: statusTarget});
              }

复制代码

onChange函数默认传value可以不用指定。
jsx语法举例：


              {
                 status == 2 &&
                 <Select defaultValue="2019" style={{width: 200, "margin-left": "10px"}} onChange={this.handleChange}>
                   {yearList && yearList.map(item => <Option value={item} key={item}>{item}</Option>)}
                 </Select>
               }
   ```
   大括号中的就是js语句，可以用&&符号判断显示方式。
   
   
通用函数写法 <br>
1. onChange函数或者onClick函数 获取函数值有两种默认的方式， 一种是直接传值，一种是传event对象。<br>
通过一个判断可以获取他们的值let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event。<br>
2. 设置state的值的时候可以通过函数传值了。只要在setstate的方法中在原变量的外面加上中括号[ ]，这个就是变量了。
3. 设置某个数组的某个属性，一般是listItem[index].name="username"。如果属性name也想通过变量的方式传递的话，则加上中括号省去那个点，就可以了:如listItem[index][name]="username"。<br>

复制代码

changeItemValue = (index, listName, attrName, event) => {

let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event;
listName[index][attrName] = value;
this.setState({
  [listName]: listName
})
复制代码

}

对于空字符串及undefined,可以统一用实体做判断就可以。比如name可能是"",也可能是undefined，用判断if(name)做判断。<br>

复制代码