[JavaScript知识库]2021-10-10

一.组件与创建组件方式

1.组件的含义

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

2.创建组件的方式

函数组件与 class 组件。

3.函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

4.class组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上述两个组件在 React 里是等效的。

二.容器组件，UI组件组件和无状态组件

1. 容器组件负责管理数据和逻辑。
2. UI 组件负责 UI 的呈现。
3. 把UI组件用函数表示（可以省去生命周期函数等，优化代码）。

1.普通的TodoList.js组件

import React,{ Component,Fragment } from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
import store from './store';
import {getInputChangeAction ,getAddItemAction,getDeleteItemAction} from "./store/actionCreators";
 
 
class Todolist extends Component{
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleInputChange= this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleBtnDelete = this.handleBtnDelete.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    render(){
        return (
            <Fragment>
                <div style={{marginTop:'10px',marginLeft:'10px'}}>
                    <Input value={this.state.inputValue}
                           placeholder='to do'
                           style={{width: '300px',marginRight:'10px'}}
                           onChange={this.handleInputChange}
                    />
                    <Button type="primary" onClick={this.handleBtnClick} >提交</Button>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => (<List.Item key = {index} onClick = {this.handleBtnDelete}>{item}</List.Item>)}
                        style={{marginTop:'10px',width: '300px'}}
                    />
                </div>
            </Fragment>
        )
    }
    handleInputChange(e){
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }
    handleStoreChange(){
        this.setState(store.getState());
    }
    handleBtnClick(){
        const action = getAddItemAction();
        store.dispatch(action);
    }
    handleBtnDelete(){
        const action = getDeleteItemAction(this.props.index);
        store.dispatch(action);
    }
}
export default Todolist;

2.拆分后的TodoList.js（容器组件）

import React,{ Component,Fragment } from 'react';
import 'antd/dist/antd.css';
import store from './store';
import {getInputChangeAction ,getAddItemAction,getDeleteItemAction} from "./store/actionCreators";
import TodoListUI from "./TodoListUI";
 
class Todolist extends Component{
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleInputChange= this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleBtnDelete = this.handleBtnDelete.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    render(){
        return (
            <TodoListUI
                inputValue = {this.state.inputValue}
                list = {this.state.list}
                handleInputChange = {this.handleInputChange}
                handleBtnClick = {this.handleBtnClick}
                handleBtnDelete = {this.handleBtnDelete}
            />
        )
    }
    handleInputChange(e){
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }
    handleStoreChange(){
        this.setState(store.getState());
    }
    handleBtnClick(){
        const action = getAddItemAction();
        store.dispatch(action);
    }
    handleBtnDelete(){
        const action = getDeleteItemAction(this.props.index);
        store.dispatch(action);
    }
}
export default Todolist;

3.拆分后的TodoListUi.js（UI组件）

import React ,{ Component ,Fragment} from 'react';
import { Input,Button,List } from 'antd';
 
class TodoListUI extends Component{
    render(){
        return(
            <Fragment>
                <div style={{marginTop:'10px',marginLeft:'10px'}}>
                    <Input value={this.props.inputValue}
                           placeholder='to do'
                           style={{width: '300px',marginRight:'10px'}}
                           onChange={this.props.handleInputChange}
                    />
                    <Button type="primary" onClick={this.props.handleBtnClick} >提交</Button>
                    <List
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item,index) => (<List.Item key = {index} onClick = {this.props.handleBtnDelete}>{item}</List.Item>)}
                        style={{marginTop:'10px',width: '300px'}}
                    />
                </div>
            </Fragment>
        )
    }
}
export default TodoListUI;

4.拆分后的TodoListUi.js（无状态组件）

上面的代码，其中只有一个render函数，但是它作为一个子组件在使用，那们我们都知道react的运行机制，当父组件的状态发生改变的时候render函数会被重新执行渲染，子组件也会跟随父组件进行渲染，这样会造成资源的浪费！所以可以用无状态组件来优化。

import React  from 'react';
import { Input,Button,List } from 'antd';
//注意props是被父组件中传来的，所以这里就直接使用了，可以去掉this
const TodoListUI = (props) =>{
    return (
        <div style={{marginTop:'10px',marginLeft:'10px'}}>
            <Input value={props.inputValue}
                   placeholder='to do'
                   style={{width: '300px',marginRight:'10px'}}
                   onChange={props.handleInputChange}
            />
            <Button type="primary" onClick={props.handleBtnClick} >提交</Button>
            <List
                bordered
                dataSource={props.list}
                renderItem={(item,index) => (<List.Item key = {index} onClick = {props.handleBtnDelete}>{item}</List.Item>)}
                style={{marginTop:'10px',width: '300px'}}
            />
        </div>
    )
}
export default TodoListUI;