地方网站需要什么手续,h5制作的软件,网站前端开发培训西安,云南住房和建设厅网站首页本章内容 目录 一、state 与 render 函数的关系二、props 与 render函数的关系 上一节我们讲了如何使用 PropTypes及 DefaultProps来进行属性的类型校验及设置属性默认值。本节内容我们来了解一下 state、props与render函数的关系。
一、state 与 render 函数的关系
我们知道… 本章内容 目录 一、state 与 render 函数的关系二、props 与 render函数的关系 上一节我们讲了如何使用 PropTypes及 DefaultProps来进行属性的类型校验及设置属性默认值。本节内容我们来了解一下 state、props与render函数的关系。
一、state 与 render 函数的关系
我们知道React是一个有”数据“驱动视图的框架即数据发生变化页面视图就会自动的跟着发生变化。那这背后的原理是怎么样的呢这背后其实是这样运作的当组件的 state或者 props发生变化时render函数就会重新执行。而界面又是由 render函数渲染出来的所有数据发生变化界面自然而然的自动跟着变化。下面我们来打开 TodoList.js来演示一遍(不断地更改输入框的值观察 render函数的执行情况)
import React, { Component, Fragment } from react;
import TodoItem from ./TodoItem;class TodoList extends Component{constructor(props) {super(props)this.deleteData this.deleteData.bind(this)this.addListData this.addListData.bind(this)this.changeInputValue this.changeInputValue.bind(this)this.state {inputValue: , list: []} // 1、一旦 state 中的数据发生变化可以通过操作输入框的数据来使其数据发生变化}render() { // 2、render 函数会重新执行重新使用新的数据进行渲染console.log(render) // 3、这里使用 console 来巧妙观察render函数是否在数据变化时执行return (Fragmentdivlabel请输入要进行的事项/labelinput value{this.state.inputValue} onChange{this.changeInputValue} /button onClick{this.addListData} 提交 /button/divul {this.getTodoItem()} /ul/Fragment)}getTodoItem() {return this.state.list.map((item, index) {return TodoItem key{index} content{item} index{index} deleteFn{this.deleteData}/TodoItem})}deleteData(index) {this.setState((prevState) {const list [...prevState.list]list.splice(index, 1)return {list}})}addListData() {this.setState((prevState) ({list: [...prevState.list, prevState.inputValue],inputValue: }))}changeInputValue(e) {const value e.target.valuethis.setState(() ({inputValue: value})) }
}export default TodoList运行代码你会发现当输入框输入数据在变化时控制台就相应的输出 render函数中打印的信息”render“
二、props 与 render函数的关系
打开 TodoItem.js我们来演示下 props变化界面跟着变化的情形
import React, { Component } from react
import PropTypes from prop-types class TodoItem extends Component {constructor(props) {super(props)this.handleClick this.handleClick.bind(this)}render () {console.log(TodoItem 的 render 函数执行了) // 1、当属性数据发生变化会重新执行 render 函数打印此信息/*2、通过属性从父组件传来的数据。2.1 子组件的 content 是从父组件接收的在父组件 TodoList 里content的值是列表循环的每一项。当输入框输入数据并点击提交列表的数据会发生变化子组件收到的属性数据也会发生变化子组件的 render 函数会根据新值进行渲染2.2 当父组件的 render 函数运行时其子组件的 render 函数也会被运行一次。因为子组件也是被父组件的render函数渲染出来的所以父组件的render执行子组件的render也会执行*/const { content, title } this.propsreturn (div onClick{this.handleClick}{/* 展示在界面的内容 content2 */}{title}---{content}/div)}handleClick() {const { deleteFn, index } this.propsdeleteFn(index)}
}TodoItem.propTypes {title: PropTypes.string.isRequired,content: PropTypes.string,index: PropTypes.number,deleteFn: PropTypes.func
}TodoItem.defaultProps {title: 我是子组件
}export default TodoItem本章的 state及 props跟render函数的关系介绍到这里。可能小伙伴们存在一些疑惑可以等介绍完”虚拟DOM“的知识后回过来看那时可能会对 React的”数据驱动“思想有更深的了解
到此本章内容结束
