react--学习笔记5（组件组合）

落日映苍穹つ 2022-11-25 04:29 208阅读 0赞

## 组件组合： ##

**功能界面的组件化编码流程:**

1.  拆分组件: 拆分界面,抽取组件
2.  实现静态组件: 使用组件实现静态页面效果
3.  实现动态组件
    
    1.  动态显示初始化数据
    2.  交互功能(从绑定事件监听开始)

首先：用的是VScode实例，之后会有一个完整的代码，用的是Hbuilder

第一步：拆分组件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

第二步：先实现静态页面效果

import React from 'react'
    
    export default class App1 extends React.Component{
    
            render () {
             return<div>
                 <h1>Simple Add List</h1>
                 <Add />
                 <List />
              </div>
       }
    }
    class Add extends React.Component{
        render(){
            return<div>
                <input type='text' />   
                <button>添加#1</button>
            </div>
        }
    }
    class List extends React.Component{
        render(){
            return(
                <ul>
                    <li>sss</li>
                    <li>sscvv</li>
                    <li>bbn</li>
                    <li>gghh</li>
                </ul>
            )
        }
    }

在App.js中引入<App1 />

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]

第三步，实现动态显示初始化数据

import React from 'react'
    import PropTypes from 'prop-types'
    
    export default class App1 extends React.Component{
        // 1.初始化数据
        constructor (props){
            super(props)
            this.state={
                todos:['画画','跳舞','打代码']
            }
        }
            render () {
             return<div>
                 <h1>Simple Add List</h1>
                 <Add />
                 <List todoslist={ this.state.todos }/>
              </div>
       }
    }
    class Add extends React.Component{
        render(){
            return<div>
                <input type='text' />   
                <button>添加#1</button>
            </div>
        }
    }
    class List extends React.Component{
        static propTypes ={
           todoslist: PropTypes.array.isRequired
        }
        render(){
            const {todoslist}=this.props
            return(
                <ul>
                   {todoslist.map((todo,index)=><li key={index}>{todo}</li>) }
                </ul>
            )
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2][]

第四步：实现交互

1.先添加count动态

import React from 'react'
    import PropTypes from 'prop-types'
    
    export default class App1 extends React.Component{
        // 1.初始化数据
        constructor (props){
            super(props)
            this.state={
                todos:['画画','跳舞','打代码']
            }
        }
            render () {
             return<div>
                 <h1>Simple Add List</h1>
                 <Add count={this.state.todos.length}/>
                 <List todoslist={ this.state.todos }/>
              </div>
       }
    }
    class Add extends React.Component{
        static propTypes={
            count:PropTypes.number.isRequired
        }
        render(){
            return<div>
                <input type='text' />   
                <button>添加#{this.props.count}</button>
            </div>
        }
    }
    class List extends React.Component{
        static propTypes ={
           todoslist: PropTypes.array.isRequired
        }
        render(){
            const {todoslist}=this.props
            return(
                <ul>
                   {todoslist.map((todo,index)=><li key={index}>{todo}</li>) }
                </ul>
            )
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3][]

**unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。**

2.交互动态

import React from 'react'
    import PropTypes from 'prop-types'
    
    export default class App1 extends React.Component{
        // 1.初始化数据
        constructor (props){
            super(props)
            this.state={
                todos:['画画','跳舞','打代码']
            }
            this.addTodo =this.addTodo.bind(this)
        }
        addTodo(todo){
         const {todos} =this.state
         todos.unshift( todo )
         this.setState({todos })
        }
            render () {
                const {todos}=this.state;
             return(
             <div>
                 <h1>Simple Add List</h1>
                 <Add count={todos.length} addTodo={this.addTodo}/>
                 <List todoslist={ todos }/>
              </div>)
       }
    }
    class Add extends React.Component{
        static propTypes={
            count:PropTypes.number.isRequired,
            addTodo:PropTypes.func.isRequired
        }
        constructor (props){
            super(props)
            this.add =this.add.bind(this)
        }
        add(){
         const todo = this.addInput.value.trim()
    
         if(!todo){
             return
         }
         this.props.addTodo(todo)
    
         this.addInput.value=''
        }
        render(){
            return(
            <div>
                <input type="text" ref={input => this.addInput= input}/>   
                <button onClick={this.add}>添加#{this.props.count+1}</button>
            </div>)
        }
    }
    class List extends React.Component{
        static propTypes ={
           todoslist: PropTypes.array.isRequired
        }
        render(){
            const {todoslist}=this.props
            return(
                <ul>
                   {todoslist.map((todo,index)=><li key={index}>{todo}</li>) }
                </ul>
            )
        }
    }

![20200812115933195.gif][]

Hbuilder写法：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>组件组合</title>
    	</head>
    	<body>
    		<div id="test"></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/babel">
    			//问题1:数据保存到哪里?
    			//首先看是所有组件需要（写在共同的父组件中），还是某些组件需要（写给自己就行）
    		    //问题2：需要在子组件中改变父组件的状态
    		    //子组件中不能直接改变父组件的状态
    		    //状态在那个组件，更新状态行为就应该定义在那个组件
    		    //解决：父组件定义函数，传递给子组件，子组件调用
    		class App extends React.Component{
    			constructor (props){
    				super(props)
    				//初始化状态
    				this.state = {
    					todos: ['吃饭', '睡觉', '工作','艺术']
    				}
    				this.addTodo =this.addTodo.bind(this)
    			}
    			addTodo(todo){
    				//this.state.todos.unshift(todo)---错误示范
    				const {todos} =this.state
    				todos.unshift(todo);
    				//更新状态
    				this.setState({todos})
    			}
    			render(){
    				const { todos } = this.state;
    				return(
    					<div>
    					<h1>Simple Add List</h1>
    					<Add  count={todos.length} addTodo={this.addTodo}/>
    					<List todos={ todos } />
    					</div>
    				)
    			}
    		}
    		
    		class Add extends React.Component{
    			constructor (props){
    				super(props)
    				this.add =this.add.bind(this)
    			}
    			add(){
    				//1.读取输入的数据
    				const todo =this.todoInput.value.trim()
    				//2.检查合法性
    				if(!todo){
    					return
    				}
    				//3.添加
    				this.props.addTodo(todo)
    				//清除数据
    				this.todoInput.value=''
    				}
    			render(){
    				const {todos} =this.props
    				return(
    					<div>
    					<input type="text" ref={input => this.todoInput=input}/>
    					<button onClick={this.add}>添加{this.props.count+1}</button>
    					</div>
    				)
    			}
    		}
    			Add.propTypes ={
    				count:PropTypes.number.isRequired,
    				addTodo:PropTypes.func.isRequired
    		}
    		class List extends React.Component{
    			
    			render(){
    				const {todos} =this.props;
    				return(
    					<ul>
    					{
    						todos.map((todo,index) => {return <li key={index}>{todo}</li>})
    					}
    					</ul>
    				)
    			}
    		}
    		List.propTypes ={
    				todos:PropTypes.array.isRequired
    		};
    		
    		ReactDOM.render(<App />, document.getElementById('test'))
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221124/630e13e8afae49cab7d48442c837c6a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221124/e4a655120b554171b3766b3a726eb8b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2]: /images/20221124/d6c987f1be204b829a42dc008924bee9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3]: /images/20221124/52ee4cf26dec46018e1b2ab90e785aab.png
[20200812115933195.gif]: /images/20221124/a83b8a4cf0674352b94369e01ae21426.png