React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数

• 4.3 利用高阶函数与函数柯里化简写3.4的代码

• 4.4 不用柯里化实现

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.React组件的分类

===============================================================================

1.1函数式组件

---

提示：函数式组件和类式组件，顾名思义它们的意思就是在把组件放到函数中或者类中去定义。

1.1.1函数式组件特点：

1. 函数式组件一般用于比较简单的组件定义，类组件用于复杂的组件定义

2. 没有生命周期和state

3. 函数组件中的this是undefined，因为函数式组件中默认开启了严格模式

4. 函数组件是一个纯函数，它接收一个props对象返回一个react元素

5. 不能在函数组件中使用生命周期钩子，原因和不能使用state一样，所有的生命周期钩子都来自于继承的React.Component中。

1.1.2函数式组件的基本写法：

// 1. 创建函数式组件

function MyComponent(){

console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式

return

我是用函数定义的组件（适用于简单组件的定义）

}

// 2. 渲染组件到页面

ReactDOM.render(, document.getElementById(‘root’))

结果为下：

代码解释：

执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？

React解析组件标签，找到了MyComponent组件。

发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

1.1.3【补充】严格模式中的this

// 1.未开启严格模式

function sayThis() {

console.log(this)

}

sayThis() // Window {…}

// 2.开启严格模式

function sayThis2() {

‘use strict’

console.log(this)

}

sayThis2() // undefined

总结：

如果不开启严格模式，直接调用函数，函数中的this指向window

如果开启了严格模式，直接调用函数，函数中的this是undefined

1.2类式组件

---

1.2.1函数式组件特点：

1. 类组件用于复杂的组件定义

2. 类组件中的this指向的是当前组件的实例对象

3. 类组件需要去继承React.Component，随后new出来该类的实例，并且实例身上有state、props、refs这三个主要的属性

4. 类式组件有生命周期和状态state

5. 可以在类式组件中使用生命周期钩子，因为所有的生命周期钩子都来自于继承的React.Component中。

1.2.2函数式组件的基本写法：

//1.创建类式组件

class MyComponent extends React.Component {

render(){

//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。

//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。

console.log(‘render中的this:’,this);

return

我是用类定义的组件(适用于【复杂组件】的定义)

}

}

//2.渲染组件到页面

ReactDOM.render(,document.getElementById(‘root’))

结果如下：

代码解释：

执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？

React解析组件标签，找到了MyComponent组件。

发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

2.组件实例三大属性

=============================================================================

2.1 state属性

---

2.1.1理解

• state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

• 组件被称为“状态机”，通过更新组件实例的state来更新对应的页面显示（重新渲染组件）

• 组件里面维护着状态 ————> 状态里存着数据 ————> 在更新状态里的数据时 ————> 组件达到一次重新渲染（比如render再帮你调用一次）

下面图片可以更方便理解：

2.1.2 案例应用

需求：定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽

2. 点击文字切换天气

手动切换板

类式组件，在构造器中_初始化状态_，在render中通过this.state读取状态

// 1. 创建组件

class Weather extends React.Component{

constructor(props) {

super(props)

// 初始化状态

this.state = {

isHot: true

}

}

render() {

// 读取状态

const {isHot} = this.state

return

今天天气很{isHot?‘炎热’:‘凉爽’}

}

}

// 2. 渲染组件到页面

ReactDOM.render(, document.getElementById(‘test’))

---

【补充】原生JavaScript绑定事件监听的三种方式

按钮1

按钮2

按钮3

---

点击切换版

// 1.创建组件

class Weather extends React.Component {

// 构造器调用几次？ ———— 1次

constructor(props){

super(props)

// 初始化状态

this.state = {isHot:false,wind:‘微风’}

// 解决 changeWeather 中 this 指向问题

this.changeWeather = this.changeWeather.bind(this)

}

// render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数

render(){

console.log(‘render’);

//读取状态

const {isHot,wind} = this.state

return

今天天气很{isHot ? ‘炎热’ : ‘凉爽’}，{wind}

}

// changeWeather调用几次？ ———— 点几次调几次

changeWeather(){

// changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用

// 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用

// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

console.log(‘changeWeather’);

// 获取原来的isHot值

const isHot = this.state.isHot

// 严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。

this.setState({isHot:!isHot})

// console.log(this);

// 严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！

// this.state.isHot = !isHot //这是错误的写法

}

}

//2.渲染组件到页面

ReactDOM.render(,document.getElementById(‘test’))

---

精简代码（实际开发中这样写）

1. 可以不写构造器，类中直接写赋值语句来初始化状态

2. 不用bind来绑定this（赋值语句的形式+箭头函数）

// 1.创建组件

class Weather extends React.Component{

// 初始化状态

state = {isHot:false,wind:‘微风’}

render(){

const {isHot,wind} = this.state

return

今天天气很{isHot ? ‘炎热’ : ‘凉爽’}，{wind}

}

// 自定义方法————要用赋值语句的形式+箭头函数

// 没有放在原型上，而是放在实例上

changeWeather = () => {

const isHot = this.state.isHot

this.setState({isHot:!isHot})

}

}

// 2.渲染组件到页面

ReactDOM.render(,document.getElementById(‘test’))

---

【补充】类中直接写赋值语句

在类中直接写赋值语句，等于是给类的实例对象添加属性且赋值

2.1.3 state案例总结

1. 组件中render方法中的this为组件实例对象

2. 组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数 + 赋值语句

3. 状态数据state，不能直接修改或更新

4. 状态必须通过setState()进行更新, 且更新是一种合并，不是替换。

2.2 props属性

---

2.2.1理解

1. 每个组件的实例对象都会有props(properties的简写)属性

2. 组件标签的所有属性都保存在props中

2.2.2作用

1. 通过标签属性从组件外向组件内传递变化的数据

2. 注意：组件内部不可修改props数据，是只读的

2.2.3案例演示

// 创建组件

class Person extends React.Component{

render() {

return (

• 姓名：{this.props.name}
• 性别：{this.props.sex}
• 年龄：{this.props.age}

• )

  }

  }

  // 渲染组件到页面上

  ReactDOM.render(, document.getElementById(‘test’))

  ---

  

  2.2.4 扩展属性: 将对象的所有属性通过props传递（批量传递标签属性）

  //单个传递

  ReactDOM.render(, document.getElementById(‘test’))

  //通过展开运算符批量传递

  const person = {name: ‘yk’, age: 18, sex: ‘男’}

  ReactDOM.render(<Person { …person }/>, document.getElementById(‘test’))

  【补充】展开运算符

  let arr1 = [1, 3, 5, 7, 9]

  let arr2 = [2, 4, 6, 8, 10]

  // 1. 展开一个数组

  console.log(…arr1); // 1 3 5 7 9

  // 3. 在函数中使用

  function sum(…numbers) {

  return numbers.reduce((preValue, currentValue) => {

  return preValue + currentValue

  })

  }

  console.log(sum(1, 2, 3, 4)); // 10

  // 4. 构造字面量对象时使用展开语法

  let person = {

  name: ‘tom’,

  age: 18

  }

  // console.log(…person); // 报错，展开运算符不能展开对象

  console.log({…person}) // {name: “tom”, age: 18}

  let person2 = { …person } // 可以克隆一个对象

  person.name = ‘jerry’

  console.log(person2); // {name: “tom”, age: 18}

  console.log(person); // {name: “jerry”, age: 18}

  // 5. 合并对象

  let person3 = {

  …person,

  name: ‘jack’,

  address: “地球”

  }

  console.log(person3); // {name: “jack”, age: 18, address: “地球”}

  ---

  2.2.5 对props中的属性值进行类型限制和必要性限制

  使用prop-types库进限制（需要引入prop-types库）

  //对标签属性进行类型、必要性的限制

  Person.propTypes = {

  name:PropTypes.string.isRequired, // 限制name必传，且为字符串

  sex:PropTypes.string, // 限制sex为字符串

  age:PropTypes.number, // 限制age为数值

  speak:PropTypes.func, // 限制speak为函数

  }

  ---

  2.3 refs属性

  ---

  2.3.1 理解

  组件内的标签可以定义ref属性来标识自己

  2.3.2 createRef创建ref容器

  定义

  // React.createRef调用后可以返回一个容器

  // 该容器可以存储被ref所标识的节点,该容器是“专人专用”的

  myRef = React.createRef()

  使用

  this.myRef.current

  2.3.3 案例演示

  需求: 自定义组件, 功能说明如下

  1. 点击按钮, 提示第一个输入框中的值

  2. 当第2个输入框失去焦点时, 提示这个输入框中的值

  //创建组件

  class Demo extends React.Component{

  myRef = React.createRef()

  myRef2 = React.createRef()

  //展示左侧输入框的数据

  showData = ()=>{

  alert(this.myRef.current.value);

  }

  //展示右侧输入框的数据

  showData2 = ()=>{

  alert(this.myRef2.current.value);

  }

  render(){

  return(

   

  点我提示左侧的数据 

   

  )

  }

  }

  //渲染组件到页面

  ReactDOM.render(,document.getElementById(‘test’))

  2.3.4 注意

  1. 通过onXxx属性指定事件处理函数(注意大小写)

  2. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件----为了更好的兼容性

  3. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ----为了的高效

  4. 通过event.target得到发生事件的DOM元素对象——不要过度使用ref

  ---

  

  发生事件的元素是需要操作的元素时，可以避免使用ref

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  素对象——不要过度使用ref

  ---

  

  发生事件的元素是需要操作的元素时，可以避免使用ref

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-UapE85MX-1714950390603)]

  [外链图片转存中…(img-wPd5b1T7-1714950390603)]

  [外链图片转存中…(img-EwZYZoAM-1714950390603)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！