React 组件协同使用之组件嵌套

1、组件嵌套的含义
组件嵌套的本质是父子关系
父组件与子组件的通信关系
父组件通过属性与子组件通信
子组件向父组件通信是一个间接的关系父组件中的事件处理函数被子组件触发子组件触发事件后然后父组件进行处理比如子组件有个点击事件Click 然后父组件有个handelClick函数并且通过属性传递给子组件然后子组件会绑定到自己的点击事件上当子组件进行点击事件的时候触发的就是父组件的handelClick函数这个过程有个专门的名称叫做委托
2、组件嵌套的优缺点
优点：
逻辑清晰：父子关系
代码模块化：每个模块对应一个功能，不同的模块可同步开发
封装细节：开发者只需要关注组件的功能，不用关心组件的实现细节
缺点;
编写难度高：父子关系的具体实现需要经过深思熟虑
无法掌握细节：使用者只知道组件的用法，不知道实现细节，遇到问题难以修复
3、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套实例演示</title>
</head>
<body>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../JSXTransformer.js"></script>
<script type="text/jsx">
    var GenderSelect = React.createClass({
        render:function () {
            return <select onChange={this.props.handleSelect}>
                <option value="0">男</option>
                <option value="1">女</option>

            </select>
        }
    });
    var SignFoem =React.createClass({
        getInitialState:function () {
            return {
                name:'',
                password:'',
                gender:'',
            }
        },
        handleChange:function (name,event) {
            var newState={};
            newState[name] = event.target.value
            this.setState(newState)
        },
        handleSelect:function (event) {
            this.setState({
                gender:event.target.value
            })
        },
        render:function () {
            console.log(this.state)
            return <form>
            {/**
                 onChange={this.handleChange.bind(this,'name')}
                 这句代码的意思是调用bind 来让函数判断是那个位置调用的这个handleChange函数    bind 适用于 多个地方调用同样的函数 不用每个地方写一个函数来调用减少代码 量
                 */}
                <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this,'name')}/>
                <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this,'password')}/>
                <GenderSelect handleSelect={this.handleSelect}/>
            </form>
        }
    });
    ReactDOM.render(<SignFoem/>,document.body);
</script>

</body>
</html>

React 组件协同使用之组件嵌套

猜你喜欢