0
点赞
收藏
分享

微信扫一扫

React中的SFC是什么

静鸡鸡的JC 2022-01-31 阅读 70


定义

一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数。

1.函数的返回结果只依赖于它的参数。

let add=(a, b)=>a+b
add(2,2) // result=> 4

2. 函数执行过程里面没有副作用。

什么是副作用? 一个函数在执行过程中产生外部可观察的变化


  • 修改外部的变量
  • 调用 DOM API 修改页面
  • 发送了 Ajax 请求
  • 调用 window.reload 刷新浏览器
  • console.log 往控制台打印数据。

3.没有额外的状态依赖

指方法内的状态都只在方法的生命周期内存活,这意味着不能在方法内使用共享变量,因为会带来不可知因素。

为什么需要纯函数?

因为纯函数非常“靠谱”,执行一个纯函数你不用担心它会干什么坏事,它不会产生不可预料的行为,也不会对外部产生影响。不管何时何地,你给它什么它就会乖乖地吐出什么。如果你的应用程序大多数函数都是由纯函数组成,那么你的程序测试、调试起来会非常方便。

函数组件

函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候,需要用类组件。

函数组件的缺点:

a. 无状态组件 函数组件只能实现非常简单的渲染功能。只是进行页面的展示和数据的渲染。没有逻辑的处理。也就是组件的内部是没有自己的数据和状态的。它是无状态组件。 无状态组件的使用时机是当且仅当数据展示、不需要逻辑处理的时候来使用。

b. 没有this 打印内部的this。得到undefined。

function print(props){
  console.log("打印函数组件内部的this:",this)
}

c. 没有生命周期 函数组件内部也没有生命周期。

d. 父组件调用pure

纯函数组件pure.jsx

import React from 'react';
function Pure(props) {
return <div>hello {props.name},今年{props.age}</div>
}

export default Pure

使用

import React, {Component} from 'react';
import Pure from './Pure.jsx
export default class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<React.Fragment>
<div>这里是父组件</div>
<Pure name={'小明'} age={20}/>
</React.Fragment>
)
}
}


举报

相关推荐

0 条评论