第1章 React简介及基础语法
1-2 React开发环境搭建
cd /Users/XXX/Desktop/homework/React
npx create-react-app todo-list
cd todo-list
npm run start
1-3 工程代码的精简
- index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(- serviceWorker.js
- index.css
- App.test.js
- logo.svg
- App.css
- setupTests.js
// 删除
- App.js
import React from 'react';
function App() {
return (
Hello, React!
);
}
export default App;
1-4 什么是组件
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
Hello, React!
);
}
}
export default App;
第2章 React实战
2-1 编写 TodoList 功能
1.index.js
import TodoList from './TodoList';
// ...
ReactDOM.render(2.App.js => TodoList.js
class TodoList extends React.Component {
render() {
// ...
}
}
export default TodoList;
3.render 函数内部需要一个容器标签包裹
import React from 'react';
class TodoList extends React.Component {
render() {
return (
- First Task
- Second Task
);
}
}
export default TodoList;
4.给按钮绑定点击事件
import React from 'react';
class TodoList extends React.Component {
handleBtnClick() {
alert('click');
}
render() {
return (
);
}
}
export default TodoList;
5.初始化数据
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
'First Task',
'Second Task',
'Three Task'
]
}
}
render() {
return (
{
this.state.list.map((item) => {
return - {item}
;
})
}
);
}
}
export default TodoList;
6.注意 button 方法的 this 指向问题
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
'First Task',
'Second Task',
'Three Task'
]
}
}
handleBtnClick() {
this.state.list.push('hello world') // 默认情况这里 this 指向 button，在 button 的方法上 .bind(this) 后，this 才指向 TodoList
}
render() {
return (
{/* 这里 this 指向 TodoList，要把它绑定到 handleBtnClick 方法 */}
{
this.state.list.map((item, index) => {
return - {item}
;
})
}
);
}
}
export default TodoList;
7.注意：在 React 里不能直接修改数据
// ...
handleBtnClick() {
this.setState({
list: [...this.state.list, 'hello world']
})
// this.state.list.push('hello world');
}
// ...
2-2 完成新增列表项的功能
1.获取 input 的值
import React from 'react';
class TodoList extends React.Component {
handleInputChange(e) {
console.log('获取 input 值',e.target.value);
}
render() {
return (
);
}
}
export default TodoList;
2.把 input 的值添加到列表
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
2-3 实现列表项的删除功能
1.
{
this.state.list.map((item, index) => {
return - {item}
;
})
}
2.
handleItemClick(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
3.使用 Hooks 进行改造
- 改造前
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
handleItemClick(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
render() {
return (
{
this.state.list.map((item, index) => {
return - {item}
;
})
}
);
}
}
export default TodoList;
- 改造后
import React, { useState } from "react";
export default function TodoList() {
const [list, setList] = useState([]);
const [inputValue, setInputValue] = useState('');
function handleBtnClick() {
setList([...list, inputValue]);
setInputValue('');
}
function handleInputChange(e) {
setInputValue(e.target.value);
}
function handleItemClick(e) {
const index = e.target.getAttribute("data-index");
const newList = [...list];
newList.splice(index, 1);
setList(newList);
}
return (
{
list.map((item, index) => {
return - {item}
;
})
}
);
}
踩坑小记：函数组件列表项的事件里面直接传 index 会有 bug
{item}
function handleItemClick(e) {
const index = e.target.getAttribute("data-index");
const newList = [...list];
newList.splice(index, 1);
setList(newList);
}