非受控组件

<div id="test"></div><script type="text/babel">class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = thisalert(`用户名：${username.value}，密码：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input type="text" ref={c => this.username = c} name="username"/>密码：<input type="password" ref={c => this.password = c} name="password"/><button>登录</button></form>)}}ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

受控组件

<div id="test"></div><script type="text/babel">class Login extends React.Component{state = {username:"",password:""}//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault()const {username,password} = this.statealert(`用户名：${username}，密码：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input name="username" type="text" onChange={this.saveUsername}/>密码：<input name="password" type="password" onChange={this.savePassword}/><button>登录</button></form>)}}ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

函数柯里化

<div id="test"></div><script type="text/babel">class Login extends React.Component{state = {username:"",password:""}saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表单提交的回调handleSubmit = (event)=>{event.preventDefault()const {username,password} = this.statealert(`用户名：${username}，密码：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input name="username" type="text" onChange={this.saveFormData('username')}/>密码：<input name="password" type="password" onChange={this.saveFormData('password')}/><button>登录</button></form>)}}ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

高阶函数

如果一个函数符合下面两种规范中的任何一个，那该函数就是高阶函数：

若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

常见的高阶函数：Promise、setTimeout、arr.map()等等

函数的柯里化

理解：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

生命周期

理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

生命周期流程图（旧）

初始化阶段

调用流程：constructor(构造器)→componentWillMount(组件将要挂载)→render(挂载)→componentDidMount(组件挂载完毕)→componentWillUnmount(组件将被卸载)

更新阶段

setState()(修改状态)→shouldComponentUpdate(控制组件更新的“阀门”，不写时默认值为true，若写了该函数，必须返回 true/false)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)
forceUpdate(强制更新)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)
父组件render(父组件更新)→componentWillReceiveProps(组件将要接收标签属性)→shouldComponentUpdate(控制组件更新的“阀门”)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)

注：componentWillReceiveProps函数在第一次接收标签属性时不会被调用，当父组件更新时才会被调用。

常用生命周期函数

componentDidMount()：一般做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
componentWillUnmount()：一般做一些收尾的事，例如：关闭定时器、取消订阅消息
render()：必须使用的一个

即将废弃的生命周期函数

componentWillMount
componentWillReceiveProps
componentWillUpdate

目前使用可加上 UNSAFE_前缀，以后可能会被彻底废弃，不建议使用。

生命周期流程图（新）

DOM的diffing算法

经典面试题

react/vue中的key有什么作用？（key的内部原理是什么？）
为什么遍历列表时，key最好不要用index？

虚拟DOM中key的作用：

简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。
详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：根据数据创建新的真实DOM，随后渲染到页面

用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新→界面效果没问题，但效率低。
如果结构中还包含输入类的DOM：会产生错误DOM更新→界面有问题
注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
如果确定只是简单的展示数据，用index也是可以的。

学习视频地址：尚硅谷React教程（2022加更，B站超火react教程）_哔哩哔哩_bilibili

React 学习笔记 day 3相关推荐

react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
React学习笔记_从create-react-app学习webpack
从create-react-app学习webpack 更多干货分布式实战(干货) spring cloud 实战(干货) mybatis 实战(干货) spring boot 实战(干货) Reac ...
React学习笔记5：React Hooks概述
文章目录概述 React的两套API 类和函数的差异副效应(副作用)是什么? 钩子(hook)出现的意义三大框架对比为什么学习hooks 应用场景新版本特性解读 Hook使用规则概述 Re ...

React 学习笔记 day 3