一、React入门

一、React简介

1. 用于构建用户界面的JavaScript库。是一个将数据渲染为HTML视图的开源JavaScript库

2. react高效的原因：

使用虚拟DOM 不总是直接操作页面真实DOM
DOM Diffing算法，最小化页面重绘

二、基本使用

1. 相关js库

react.js：React核心库
react-dom.js：提供操作DOM的react扩展库
babel.min.js：解析JSX愈发代码转为JS代码的库

2. 虚拟DOM与真实DOM：

虚拟DOM本质是object类型的对象
虚拟DOM属性少，真实DOM属性多，因为虚拟DOM是react内部再用，无需真实DOM上那么多的属性
虚拟DOM最终会被React转化为真实DOM呈现在页面上

三、React JSX

全称JavaScript XML

1. 定义虚拟DOM时不要写引号

2. 标签中混入JS表达式时要用{}

3. 样式的类名指定不要用class要用className

4. 行内样式要用 style = {{fontSize：20px， }}的形式写

5. 虚拟DOM必须只有一个根标签

6. 标签必须闭合

7. 标签首字母

若小写字母开头则将该标签转为html中同名元素，若html中无改标签对应的同名元素则报错
若大写字母开头 react就去渲染对应的组件，若组件没有定义则报错

四、组件与模块

1. 模块

一般就是一个js文件
复用ks，简化js编写，提高js运行效率

2. 组件

用来实现局部功能效果的代码和资源的集合（html/css/js/image等）
复用编码，简化项目编码，提高运行效率

3. 模块化

当应用的js都以模块来编写的，这个应用就是一个模块化的应用

4. 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

二、React面向组件编程

一、基本理解和使用

1. 组件

组件名必须首字母大写

2. 执行ReactDOM.render(<Demo/>, document.getElementById('test'))之后

React解析组件标签找到Demo组件
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM呈现在页面中

P10 类的复习

类中的构造器不是必须写的，要对实例进行一些初始化的操作如添加指定属性时才写
如果A类继承了B类且A类中写了构造器，那么A类构造器中的super是必须调用的
类中定义的方法都放在了累的原型对象上供实例使用

二、组件实例三大核心属性1: state

1. 理解

state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
组件被称为“状态机”，通过更新组件的state来更新对应的额页面显示（重新渲染组件）

组件的状态state存储数据，数据的改变驱动页面展示

构造器：初始化状态；解决this指向问题
render：从状态里读东西根据状态值做展示

！！！注意！！！

（1）组件中render方法中的this为组件实例对象

（2）组件自定义方法中this为undefined，解决办法：

强制绑定this：通过函数对象的bind()
箭头函数

（3）状态数据不能直接修改或更新

三、组件实例三大核心属性2: props

1. 理解

每个组件对象都会有props属性
组件标签的多有属性都保存在props中

2. 作用

通过标签属性从组件外向组件内传递变化的数据
注：组件内不要修改props数据

3. 编码操作

（1）使用propTypes库进行限制

        Person.propTypes = {
            //一下代码主义大小写！！！！！含义不同
            name: PropTypes.string.isRequired, //限制name必须传 且为字符串
            sex: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func, //限制函数不是function 只能是func
        }
        // 指定默认标签属性值
        Person.defaultProps = {
            sex: '男',
            age: 18
        }

（2）扩展属性：可以批量传递，将对象的所有属性通过props传递

ReactDOM.render(<Person {...p} />, document.getElementById('test3'))
        //这里的{}不是触发了复制对象 只不过react加babel允许这样展开对象
        // 仅适用于标签属性传递

（3）默认属性值

        Person.defaultProps = {
            sex: '男',
            age: 18
        }

（4）组件类的构造函数

constructor(props){
    super(props)
    console.log(props)
}

构造器是否接收props，是否传递给super取决于是否希望在构造器中通过this访问props
类式组件一般不用构造器能省略就省略

四、组件实例三大核心属性3: ref与事件处理

1. 理解

组件内的标签可以定义ref属性来标识自己

2. 编码

（1）字符串形式

<input ref = "input1" />

<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>

            showData = () =>{
                const {input2} = this.refs //结构赋值 这是真实DOM
                alert(input2.value)
            }

（2）回调形式的ref

//把节点currentNode放在了自身实例上(this) 起了名字叫input1 
//this往外找找到render render的this就是组件的实例对象
//把ref当前所处的节点（外面的input）挂在了实例自身上并取名字叫input1
<input ref={(currentNode)=>{this.input1 = currentNode}} type="text" />


showData = () => {
    const{input1} = this
    alert(input1.value)
}

（3）createRef创建ref容器

class Demo extends React.Component {
    myRef = React.createRef()
    //React.createRef()调用后可以返回一个容器，该容器可以存储被ref所表示的节点
    //该容器是专人专用的 后进去的会顶替之前进的
        showData = () =>{
        alert(this.myRef.current.value);
        }

    render() {
        return (
            <div>
                <input ref={this.myRef} type="text" placeholder="点击按钮提示"/>
                <button ref="button100" onClick={this.showData}>点我提示左侧的数据</button>
            </div>
        }
}

不要过度使用Ref 发生事件的元素正好是操作的元素可以省略Ref

3. 事件处理

（1）通过onXxx属性指定事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ——为了更好的兼容性
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) —— 为了高效

（2）通过event.target得到发生事件的DOM元素对象 —— 不要过度使用ref

五、收集表单数据（好难啊）

1. 受控组件

随着输入维护状态 onChange

2. 非受控组件

现用现取