react（二）

最新推荐文章于 2022-10-13 09:29:32 发布

天空陪伴星辰a

最新推荐文章于 2022-10-13 09:29:32 发布

阅读量139

点赞数

分类专栏：知识点文章标签： react 无状态组件组件传值 hook

本文链接：https://blog.csdn.net/weixin_44744234/article/details/100622500

版权

知识点专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

无状态组件

       在react中创建组件有三种方式：ES5写法：React.createClass；ES6写法：React.component；无状态的函数写法，又称为纯组件SFC。无状态组件的优势：代码整洁，易读；无状态，无this，无需绑定；便于测试；性能高。
在这里插入图片描述
       无状态的函数创建的组件是无状态组件，它是一种只负责展示的纯组件。

       对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，箭头函数则是函数式写法的最佳搭档。
在这里插入图片描述
       React内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。如果组件内部状态不需要更新,即没有调用过this.setState, 全部通过props来渲染也是没问题的, 不过这种情况不常见。

hook

       Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。主要是：可以在函数组件内创建局部状态，以及模拟生命周期函数。
       核心对象 useState useEffect。
       useState可以在function定义的组件中设置一个局部状态，返回两个值。第一个是状态的名字，第二个为改变状态的方法。
       Egs： const [count,setCount] = useState(0)
       useEffect可以在function定义的组件中模拟组件生命周期函数，两个参数。第一个是回调函数，第二个执行回调函数的触发条件(array)，空表示只执行一次(无代表多次)

	Egs：useEffect(()=>{
		console.log(‘only one’)
	},[])

受控组件&非受控组件

非受控组件：
顾名思义, 非受控组件即组件的状态改变不受控制。在这个最简单的输入框组件里,我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面。如果我们通过props给组件设置一个初始默认值,

	<input defaultValue={this.props.value}/>

defaultValue属性是React内部实现的一个属性,目的类似于input的placeholder属性。ps: 此处如果使用value代替defaultValue,会发现输入框的值无法改变。
在这里插入图片描述
       受控组件：
       既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。这就是最简单的受控组件模型。代码参考上图。
       完整代码：
在这里插入图片描述

react生命周期

1、react组件的生命周期
       （1）、生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述ract组件从开始到结束的过程；
       （2）、每个react组件都具有生命周期；
       （3）、react都对组件通过生命周期给予的钩子函数进行管理。
2、钩子函数
       指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数叫做钩子函数。一方面又变动。另一方面立马去处理。
3、react组件经历总体阶段
       （1）、mounted阶段加载阶段或者说初始化阶段这个阶段组件由jsx转换成真实dom；
       （2）、update阶段组件运行中阶段或者更新阶段当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段；
       （3）、umount阶段组件卸载阶段这个一般是组件被浏览器回收的阶段。
生命周期整体流程：
1、实例化

getDefaultProps 	取得默认属性
getInitialState 	初始化状态
componentWillMount	即将进入dom
render 		描画dom
componentDidMount	已经进入dom

2、具体的声明函数周期—运行中阶段数据更新过程
       运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况
       1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）；
       2、组件是否更新 shouldComponentUpdate （影响整个项目的性能，决定视图的更新）；
       3、组件即将更新 componentWillUpdate；
       4、必不可少的render；
       5、组件更新完毕时运行的函数 componentDidUpdate。
3、销毁时 componentWillUnmount
卸载组件
ReactDOM.unmountComponentAtNode(‘节点’)

虚拟dom与diff算法

       Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。
diff算法：
       传统：找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题，因为需要不同的层级。
Facebook算法：
       React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度，把树按照层级分解。
在这里插入图片描述
Facebook算法：
       列表比较，写一个 key 属性帮助 React 来处理它们之间的对应关系。实际中, 在子元素中找到唯一的 key 通常很容易。

Facebook算法：
       Components比较，React app 通常由用户定义的 component 组合而成，通常结果是一个主要是很多 div 组成的树。这个信息也被 React 的 diff 算法考虑进去, React 只会匹配相同类型(ES6 class)的 component。
在这里插入图片描述
Facebook算法：
       合并操作，当调用 component 的 setState 方法的时候, React 将其标记为 dirty。到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制。

Facebook算法：
       选择性子树渲染，在组件上实现下面的方法：

boolean shouldComponentUpdate(object nextProps, object nextState)

根据 component 的前一个和下一个 props/state，你可以告诉 React 这个 component 没有更新，也不需要重新绘制。实现得好的话, 可以带来巨大的性能提升。
在这里插入图片描述

数据加载

1、数据绑定的第一种方式：基于jsx绑定。
       （1）、在componentWillMount/componentDidMount 中获取ajax数据 ( 面试题)；
       （2）、将得到的数据存入state中；
       （3）、在render中直接将state中的数据循环遍历放在一个jsx的数据模板中；
       （4）、循环叠加这个jsx模板通过{}嵌入到页面中。
2、mixins函数(es6 弃用)
       （1）、作用是可以将一些公共的方法写在一个object的方法里面；
       （2）、然后通过mixins在组件中声明这个对象的表达式；
       （3）、在jsx中就可以使用this去调用object里面的各个方法；这样实现了react多个组件之间共享一些公共的方法。

组件传值

父组件－子组件：在子组件标签上绑定自定义属性，值为父组件需要传递的数据，子组件内部通过props接收。
子组件 - 父组件：借助回调函数参数的形式，react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化，子组件要写在父组件之前。