目录
- 组件拆分
- todolist代码优化
- react编程特点
- PropTypes与DefaultProps
github地址：https://github.com/cindygogogo/studyReact/tree/master/todolist
组件拆分
接上，将todoList组件进行拆分，结构如下
todolist组件结构.png
父子组件之间通过标签属性的方式进行通信
1.父组件向子组件传值
- 父组件通过属性的形式向子组件传递数据，既可以传递数据又可以传递方法
<TodoItem
content={item}
index={index}
deleteItem={this.handleItemDelete.bind(this)} />
- 子组件通过this.props中接收传递过来的方法和数据
<div >{this.props.content}</div>
2.子组件调用父组件的方法，修改父组件的内容
子组件通过this.props.func()就可以调用父组件的方法，父组件传递的函数 this指向要做绑定，借助这个方法对父组件的数据进行修改
Todoitem.js
import React, { Component } from 'react'
class TodoItem extends React.Component{
constructor (props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
render () {
return <div onClick={this.handleClick}>{this.props.content}</div>
}
handleClick () {
this.props.deleteItem(this.props.index)
}
}
export default TodoItem
在Todolist.js中引入Todoitem组件，修改<ul></ul>标签包裹的内容
import TodoItem from './TodoItem'
<ul>
{
this.state.list.map((item, index) => {
return (
<div>
<TodoItem
content={item}
index={index}
deleteItem={this.handleItemDelete.bind(this)}
/>
</div>
)
})
}
</ul>
todolist代码优化
1.优化todoitem组件，更符合ES6的写法，例如const { content } = this.props
完整代码：
import React, { Component } from 'react'
class TodoItem extends React.Component{
constructor (props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
render () {
const { content } = this.props
return (
<div onClick={this.handleClick}>
{content}
</div>
)
}
handleClick () {
const { deleteItem, index } = this.props
deleteItem(index)
}
}
export default TodoItem
2.优化todilist组件
减少页面中的JS逻辑getTodoItem ()
在组件初始化的时候，修改this绑定
this.handleInputChange = this.handleInputChange.bind(this)
使用更推荐的方法修改修改数据
const value = e.target.value
this.setState( () => ({
inputValue: value
}) )
完整代码：
import React, {Fragment, Component} from 'react';
import TodoItem from './TodoItem'
import './style.css'
class Todolist extends React.Component{
constructor (props) {
super(props)
this.state = {
inputValue: '',
list: []
}
// 组件初始化的时候修改this绑定
this.handleInputChange = this.handleInputChange.bind(this)
this.handleBtnClick = this.handleBtnClick.bind(this)
this.handleItemDelete = this.handleItemDelete.bind(this)
}
render() {
return (
<Fragment>
<div>
<label htmlFor="insertArea">输入内容</label>
<input
id="insertArea"
className="input"
value={this.state.inputValue}
onChange={this.handleInputChange}/>
<button onClick={this.handleBtnClick}>提交</button>
</div>
<ul>
{ this.getTodoItem() }
</ul>
</Fragment>
);
}
getTodoItem () {
return this.state.list.map((item, index) => {
return (
<TodoItem
key={index}
content={item}
index={index}
deleteItem={this.handleItemDelete}
/>
)
})
}
handleInputChange(e) {
const value = e.target.value
this.setState( () => ({
inputValue: value
}) )
}
handleBtnClick () {
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}))
}
handleItemDelete (index) {
this.setState((prevState)=>{
const list = [...prevState.list]
list.splice(index, 1)
return { list }
})
}
}
export default Todolist;
react编程特点
- react是声明式开发减少dom操作的代码量,根据数据构建页面
- 可以与其他框架并存
- 组件化
- 单向数据流，单向传递。子组件只能使用，不能修改
- 是一个视图层框架，仅负责数据和页面渲染，大型项目的组件通信交给数据层框架比如Redux、flux
- 函数式编程：易维护、面向测试
PropTypes与DefaultProps
PropTypes：对参数类型进行规定、做必填校验
DefaultProps:设置默认值
TodoItem.propTypes = {
test: PropTypes.string.isRequired,
content: PropTypes.string,
deleteItem: PropTypes.func,
index: PropTypes.number,
}
TodoItem.defaultProps = {
test: 'hello world'
}
官方文档：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
（完）
网友评论