React全家桶详细讲解-图文并茂

文章目录

• 前言
• 一、React-表单处理
• • 受控组件
  • 使用步骤
  • 多表单元素优化
  • 非受控组件
• 二、React-组件综合案例
• • 需求分析
  • 搭建任务的模板
  • 渲染列表
  • 添加任务
  • 删除任务
• 三、React-组件进阶
• • 组件通讯介绍
  • 组件的props
• 四、react-组件通讯的三种方式
• • react-父组件传递数据给子组件
  • react-子组件传递数据给父组件
  • react-兄弟组件传递
• 五、react-生命周期
• • 创建时（挂载阶段）
  • 更新时
  • 卸载时
  • 完整生命周期钩子函数
• 六、React-原理
• • 更新数据
  • 推荐语法
  • 第二个参数
  • JSX 的转化过程
• 七、React-路由的介绍
• • 路由的基本使用
  • react路由-常用组件说明
• 八、虚拟DOM和react-DIFF算法
• • 虚拟DOM
  • DIFF 算法

前言

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

一、React-表单处理

受控组件

• HTML中的表单元素是可输入的，也就是有自己的可变状态
• 而React中可变状态通常保存在state中，并且只能通过 setState() 方法来修改
• React将state与表单元素值value绑定在一起，有state的值来控制表单元素的值
• 受控组件：值受到react控制的表单元素

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

使用步骤

• 在state中添加一个状态，作为表单元素的value值

• 给表单元素绑定change事件，将表单元素的值设置为state的值
  示例：

  class App extends React.Component {
  constructor(){
  super()
  this.inputChange = this.inputChange.bind(this)
  }
  state = {
  txt : ‘’
  }
  inputChange(e){
  this.setState({
  txt: e.target.value
  })
  }
  render(){

  return (
  

  
  {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时
  候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
  
  
  
  )
  }
  }
  ReactDOM.render(,document.getElementById(‘root’))

多表单元素优化

• 问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
• 优化：使用一个事件处理程序同时处理多个表单元素
  步骤
• 给表单元素添加name属性（用来区分是哪一个表单），名称与state相同（用来更新数据的）
• 根据表单内容来获取对应值
• 在change事件处理程序中通过 [name] 来修改对应的state

示例：

inputChange(e){
let target = e.target;
let value = target.type == 'checkbox' ? target.checked : target.value;
this.setState({
[e.target.name]: value
})
}
<input type="text" value={this.state.txt} name="txt" onChange=
{this.inputChange}/>
<input type="checkbox" value={this.state.isChecked} name="isChecked" onChange=
{this.inputChange}/>

非受控组件

• 说明：借助于ref，使用元素DOM方式获取表单元素值

• ref的作用：获取DOM或者组件
  使用步骤

• 调用 React.createRef() 方法创建ref对象

• 将创建好的 ref 对象添加到文本框中

• 通过ref对象获取到文本框的值

  class App extends React.Component {
  constructor(){
  super()
  //创建 ref
  this.txtRef = React.createRef()
  }
  // 获取文本框的值
  getTxt =() => {