React学习记录笔记（基础篇）

lywdn

已于 2024-05-15 16:11:10 修改

阅读量413

点赞数 3

文章标签： react.js 学习笔记

于 2024-05-15 16:10:38 首次发布

本文链接：https://blog.csdn.net/lywdn/article/details/138854668

版权

项目环境搭建

npx create-react-app xxxx

工程目录文件说明

.gitignore ——当我们使用 git 的时候，我们希望将代码上传到线上，但有些特殊的文件我并不希望将其上传到线上去。此时，我们就可以将这些文件配置在 .gitignore 里面。
package-lock.json ——这是 package 的“锁文件”。它可以帮我们确定我们安装的“第三方包”的具体版本，以保持团队编程的统一性。
package.json ——这里边有很多“依赖包”。在开发项目的时候，我们会有一些“第三方模块”的依赖，而这些“依赖”都放在这

favicon.ico ——用于放置定制的“页面图标”，即页面标签前边的小图标。
index.html ——这是我们项目的首页“HTML 模板”。

index.js整个项目的入口文件

代码明细

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    
    <title>宁React App</title>
  </head>
  <body>
    <!-- ❗️下边这行代码意思是：
    如果网页把这个 script 给禁掉了，那么我需要给用户一个提示说，
    “你应该允许你的网页去解析 JavaScript”。
    这是一段容错的代码，可以使代码的“健壮性”更强。
    -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react'; 


import ReactDOM from 'react-dom/client';  
import TodoList from './TodoList';
const root = ReactDOM.createRoot(document.getElementById('root'));  
root.render(<TodoList />);
// react18新的挂载写法

TodoList.js


import React,{Component,Fragment} from 'react';
class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }
    deleteItem(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
    render(){
        return(
            <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                {
                    this.state.list.map((item,index)=>{
                        return(
                            <li key={index} onClick={this.deleteItem.bind(this,index)}>{item}</li>
                        )
                    })
                }
                </ul>
                
            </Fragment>
        )
    }
}
export default TodoList;

增加提交展示列表，向下回显，以及删除列表某一元素操作

父组件向子组件传递数据

子组件：TodoItem.js

import React,{Component} from "react";
class TodoItem extends Component {
    render(){
        return (
            <div>
                {this.props.content} //接受父组件传过来的参数
            </div>
        )
    }
}
export default TodoItem;

父组件：TodoList.js


import React,{Component,Fragment} from 'react';
import './style.css'
import TodoItem from './TodoItem';
class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }
    deleteItem(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
    render(){
        return(
            <Fragment>
                <div>
                    <label htmlFor='insertArea'>请输入要进行的事项</label>
                    <input className='input' value={this.state.inputValue} onChange={this.inputChange.bind(this)} id='insertArea' />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                   
                {
                    this.state.list.map((item,index)=>{
                        return(
                            // <li key={index} onClick={this.deleteItem.bind(this,index)} dangerouslySetInnerHTML={{__html:item}}></li>
                            <TodoItem content={item}></TodoItem>
//content 是重点。传参
                        )
                    })
                }
                 
                </ul>
                
            </Fragment>
        )
    }
}
export default TodoList;

子组件向父组件传数据

实现功能：子组件调用父组件删除方法，删除添加过的某一项

子组件：TodoItem.js

import React,{Component} from "react";
class TodoItem extends Component {
    render(){
        return (
            <div onClick={this.handleClick.bind(this)}>
                {this.props.content}
            </div>
        )
        
    }
    handleClick(){
            this.props.itemDelete(this.props.index)
            // 子组件调用父组件的删除方法，并传入下标index
    }
}
export default TodoItem;

父组件：TodoList.js，看一下用itemDelete


import React,{Component,Fragment} from 'react';
import './style.css'
import TodoItem from './TodoItem';
class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }
    deleteItem(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
    render(){
        return(
            <Fragment>
                <div>
                    <label htmlFor='insertArea'>请输入要进行的事项</label>
                    <input className='input' value={this.state.inputValue} onChange={this.inputChange.bind(this)} id='insertArea' />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                   
                {
                    this.state.list.map((item,index)=>{
                        return(
                            // <li key={index} onClick={this.deleteItem.bind(this,index)} dangerouslySetInnerHTML={{__html:item}}></li>
                            <TodoItem content={item} itemDelete={this.deleteItem.bind(this)}></TodoItem> 
                            //因为子组件没有删除方法，需要调用父组件的方法，this必须指向父组件，后面子组件调用时，this的指向将不会出错
                        )
                    })
                }
                 
                </ul>
                
            </Fragment>
        )
    }
}
export default TodoList;

最后所有代码进行优化（子父组件）

子组件：TodoItem.js

import React,{Component} from "react";
class TodoItem extends Component {
    constructor(props){
        super(props);

        this.handleClick = this.handleClick.bind(this) 
        //为了“性能”，我们一般把与“this 指向绑定”相关的代码都统一放在 constructor 里边；
    }
    render(){
        const {content} = this.props
        return (
            <div onClick={this.handleClick}>
                {content}
            </div>
        )
        
    }
    handleClick(){
        const {itemDelete,index} = this.props
        itemDelete(index)
    }
}
export default TodoItem;

父组件：TodoList.js


import React,{Component,Fragment} from 'react';
import './style.css'
import TodoItem from './TodoItem';
class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            inputValue:'',
            list:[]
        }
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.inputChange = this.inputChange.bind(this)
        this.deleteItem = this.deleteItem.bind(this)
    }
    render(){
        return(
            <Fragment>
                <div>
                    <label htmlFor='insertArea'>请输入要进行的事项</label>
                    <input className='input' value={this.state.inputValue} onChange={this.inputChange} id='insertArea' />
                    <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} itemDelete={this.deleteItem}/>
        })
    }
    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:""
        })
    }
    deleteItem(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default TodoList;