流程:
原型 --- 保真图 --- 静态页面( html css js ) --- 一个大组件( react component ) --- 组件拆分
举个栗子
react 简单的一个小案例,实现一个留言板功能,具有添加留言及删除评论的功能,并且同步显示到页面上。
原型、保真图:
静态页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>Today Tasks : 0</h1>
<input type="text"/>
<button>add tasks</button>
<div>
<ul>
<li>0--in-2021/10/30</li> <button>del</button>
<li>0--in-2021/10/30</li> <button>del</button>
<li>0--in-2021/10/30</li> <button>del</button>
</ul>
</div>
</div>
</body>
</html>
效果图:
一个大组件 react component (实现数据、行为、任务同步):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script src="./js/prop-types.js"></script>
<body>
<div id="app"></div>
<script type="text/babel">
//页面重构
class Tasks extends React.Component {
//数据
state = {
tasks: [],
task: "",
date: new Date().toLocaleDateString(),
};
handleChange=(e)=>{
// console.log(e.target.value);
this.setState({
task:e.target.value
})
}
handleAdd=()=>{
const {tasks,task}=this.state
if(task){
tasks.unshift(task)
this.setState({
tasks:tasks,
task:'',
date: new Date().toLocaleDateString()
},()=>{
console.log(this.state);
})
}
}
handleDele=(index)=>{
const {tasks}=this.state
tasks.splice(index,1)
this.setState({
tasks
})
}
render() {
return (
<div>
<h1>Today Tasks : {this.state.tasks.length}</h1>
<input type="text" value={this.state.task} onChange={this.handleChange}/>
<button onClick={this.handleAdd}>add tasks</button>
<div>
<ul>
{
this.state.tasks.map((task,index,date)=>{
return(
<li key={index}>
<span>{index+1}---{task}---{this.state.date}</span>
<button onClick={this.handleDele}>del</button>
</li>
)
})
}
</ul>
</div>
</div>
);
}
}
ReactDOM.render(<Tasks />, document.getElementById("app"));
</script>
</body>
</html>
效果图如下:
可以实现同步的数据的添加及删除 。
注意:删除功能使用 splice 函数来实现,用法:
定义一个 arr 数组,含有 5 个元素,使用 arr.splice(a,b,'c') 用来删除 arr 数组中的元素
其中 a 表示数组下标 ( 从 a 下标开始 ) ; b 表示删除 b 个元素; 'c' 表示在 a 下标处添加一个元素 'c' 。
例:
var arr=['a','b','c','d','e']
console.log(arr);
arr.splice(1,1)
console.log(arr);
arr.splice(1,2,'www')
console.log(arr);