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

组件组合：

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

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

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

第一步：拆分组件：

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

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' />&nbsp;&nbsp;&nbsp;
            <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 />

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

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' />&nbsp;&nbsp;&nbsp;
            <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>
        )
    }
}

 

第四步：实现交互

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' />&nbsp;&nbsp;&nbsp;
            <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>
        )
    }
}

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}/>&nbsp;&nbsp;&nbsp;
            <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>
        )
    }
}

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>