react梳理之(非)受控组件

react开始梳理,不会从最基本的创建一个react项目开始,只是梳理一些概念,今天简单梳理一个较为简单的概念,就是受控组件与非受控组件

一.react的非受控组件

1.什么叫非受控组件

1. 我们从两个字入手,那就是组件,受控与非受控是从组件的角度出发来说出的概念,字面意思就是组件时不被控制的,不被谁控制,当然是不被父组件控制,那么不受控制的组件有什么特性,就是一切逻辑只与自身有关,与其他的组件没有通信与交集
2. 在HTML当中，像,, 和 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，这些组件在不加以处理的情况下都是非受控组件,因为你真正使用的时候会发现这些组件是不会自动更新值的,我们输入的值在不做任何处理的情况是无法拿到使用输入的值的
3. 举例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}

ReactDOM.render(<Demo1/>, document.getElementById('content'))

我们这样的代码会发现一个问题,就是input组件我们这样使用的话,将无法与内部有任何交集,那么这个不带参数的input组件就是一定意义上的非受控组件,input等同与任何不传递参数的组件

2.非受控组件的解释

1. 既然非受控组件是一个与外界无任何交集的组件,那么我们是不是就用不到非受控组件了,答案是否定的,我们在特定的情况下其实是用得到非受控组件的
2. 轮播组件(非受控),想想一下如果我们页面需要一个轮播组件,且组件只使用一次不打算复用,我们把轮播的代码放到一个轮播组件中,轮播组件是否需要与外界做交互,不需要,那么我们写出来的一个不管当前轮播图如何运行,包括点击事件包括轮播的时间等条件都是写死的时候,那轮播组件就是一个非受控组件了,当然了这个例子举得有些牵强,我们在做组件的时候一定是想要一个通用的且可复用的组件的,需要得知轮播当前状态,那么就导致我们非受控组件不再适用
3. 静态页面开发.在静态页面的开发的时候,我们通常不使用框架,只用html单独写出文件,打包后性能可能更佳,但是如果我们项目中某一个页面是静态页面,我们是否就用到了我们的非受控组件,展示的页面即没有封装性,也只能是定制性的页面,那我们的页面组件单独存在的时候,也就是非受控组件了

3.总结

非受控组件也就是一个独立组件,不需要传值也无任何与当前组件的父组件有所交集,在我们封装组件的时候,只有在当前组件只做展示用途且无任何不同的时候才会封装为非受控组件

二.react的受控组件

1.什么叫受控组件

1. 这个我们就与非受控组件时相反的,从字面意思就是受辖制,受父级组件所管制的组件,就叫做受控组件
2. 父组件如何对子组件进行控制,当然是通过传值进行管控,props传值被子组件所使用,且子组件的内容或方法或展示结果因父组件的传值而更改的时候,子组件就是一个受父组件管控的受控组件
3. 举例

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }

    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value='123' />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}

ReactDOM.render(<Input/>,window.app)

我们不要把input看作input组件,我们要把input看作任何一个我们引用或者自己封装的组件当这个组件被我们传值之后,哪怕是被我们传的固定的字符串,本质上来讲依旧是受控组件,受控组件不是看有没有数据双向绑定,而是看本质上有没有受控,当我们传递一个固定值的时候,input组件的值就固定了,无法修改,虽然我们传递了props时写死的值,但是这个值依旧是把input组件进行了控制

2.受控组件的解释

1. 受控组件实际上是出现在我们编程的方方面面的,我们单独拿出来的任何一个组件,大概率都是受控组件,毕竟静态页面需求还是较少的,我们js大部分时候都是处理逻辑的,那逻辑必然是要有交互的
2. 举例就是如上inpu组件代码,等同与textarea和select组件,我们都是要通过一些参数(props)传递去告知组件的具体渲染规则和展示内容的,比如type属性也是我们进行组件受控的一种
3. 数据的双向绑定:其实在我们传递给value任意一个值或者属性的时候,就已经把组件的意义变成了受控组件,但是我们绑定onChange的时候,通过onChange给到我们组件一个数据改变时的回调方法,在回调方法中我们通过setState进行数据的更改,从而进行render的重新渲染,这就是数据的双向绑定了,数据驱动视图,视图驱动数据嘛

总结:受控组件与非受控组件就是一个概念,表明当前的组件是否受控,是否是一个单独的与其他内容都无任何交互的组件,简单来说,完全独立的一个组件,就可以看作一个非受控组件,其他的都时受控组件