React入门笔记

  • Z时代
  • 2024-01-10
  • 分类：综合

react

主要看看大牛都是怎么入门的，然后再看看大牛入门之后给菜鸟们留下的宝藏：

React入门可以看看阮大师的这篇文章：

文章打开以为很长，结果页面中70%是评论，所以不要害怕，这篇文章很短。

看完这篇文章再去啃React Chain的文档会比较好，基本是React官方文档的中文翻译。

笔记

  • 【Demo1】单页显示的react可以再HTML页面中使用<script type="text/babel"></script>

  • 【Demo2】ReactDOM.render()是react里最基本的方法，可以理解未渲染，把react模板渲染成HTML，然后插入展示

  • 【Demo3】HTML和DOM可以混合着写，会自动识别一< 开头的代码还是以 { 开头的代码

  • 【Demo4】React.creatClass允许代码封装成组件，相当于可以自定义<button> 之类的组件，展现形式自己决定，可方便的修改组件。
    • 这里有几点需要注意：

      • 1）获取属性的值用的是this.props.属性名

      • 2）创建的组件名称首字母必须大写。

      • 3）为元素添加css的class时，要用className。

      • 4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}

  • 【Demo5】通过this.props来获取<> 里面的属性，有一点不一样的是this.props.children属性，可以使用React.Children.map来遍历子节点。

  • 【Demo6】可以通过PropType设置创造新的属性，是静态的，可以限制数据类型

  • 【Demo7】DOMdiff是指先控制虚拟DOM的变化，再插入文档中。用了很搞高校的方法对比新旧DOM

    • <input type="text" ref="refName"> 可以通过ref属性来获取真实DOM节点的内容，this.refs.[refName] 会返回值

  • 【Demo8】this。state 是react精华，可以将组件看作状态机，与用户互动改变。
    • 与props的区别是，props一旦定义了就不再改变，state通过设置要给初始状态，随时可以通过setState改变组件的特性

  • 【Demo9】文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值.

  • 【Demo10】组件的生命周期

    • 三个状态

      • Mounting：已插入真实 DOM

      • Updating：正在被重新渲染

      • Unmounting：已移出真实 DOM

    • 三种状态每种几乎都有will(进入状态前)，和did(进入状态后)两种处理方式

    • 五种处理函数

      • componentWillMount()

      • componentDidMount()

      • componentWillUpdate(object nextProps, object nextState)

      • componentDidUpdate(object prevProps, object prevState)

      • componentWillUnmount()

    • 两种特殊状态处理函数

      • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

      • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

  • 【Demo11】componentDidMount 配合$.get 可以实现ajax成功后再调用this.setState重新渲染UI，注意要用bind改变域
    • 也可以用promise

入门之后探原理

1 ReactJS简介

据说是FB对市场上所有的MVC架构都不满意，就自己写了一个来架设Instagram，做出来之后觉得很好用，就再2013年开源了，然后就火了

2 React认识误区

  • React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式

  • React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点

  • 有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；
    • Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力，可以自由的进行定制组件。

  • React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作

3 React JS原理

  • 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。

  • 而复杂或频繁的DOM操作通常是性能瓶颈产生的原因

    • 如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标

  • React为此引入了虚拟DOM（Virtual DOM）的机制。

    • 在浏览器端用Javascript实现了一套DOM API

      • 基于React进行开发时所有的DOM构造都是通过虚拟DOM进行

      • 每当数据变化时，React都会重新构建整个DOM树

      • 然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别

      • 然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

    • 而且React能够批处理虚拟DOM的刷新。

      • 在一个事件循环（Event Loop）内的两次数据变化会被合并

      • 例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。

    • 尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。
      • 这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

  • 和古老的存Web界面相比
    • 如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。

  • 举个栗子

    • 借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时：

    • 传统开发的思路如图1，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；

    • 而基于React的开发思路如图2，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。

    • 可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。

4 组件化思想

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。

如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

  • 对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。

  • 对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。

在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

React认为一个组件应该具有如下特征：

  • （1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；

  • （2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；

  • （3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

参考：颠覆式前端UI开发框架：React

以上是 React入门笔记 的全部内容， 来源链接： utcz.com/z/383431.html

回到顶部