React类组件函数组件&& 组件实例的三大核心属性

目录

基本理解和使用

React面向组件编程

函数式组件：

复习类的相关知识

类式组件：

 组件实例的三大核心属性

类中方法的this指向

state

 props

展开运算符

类中的构造器

函数式组件使用props

符串形式的ref

回调形式的ref

createRef创建ref容器·

---

基本理解和使用

React面向组件编程

函数式组件：

此处this是undefined babel编译后开启了严格模式

执行了 ReactDOM.render(, document.getElementById('test'))之后

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

注意

1. 组件名必须首字母大写标签
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签
4. 函数必须有返回值

复习类的相关知识

• 类中的构造器，不是必须写的，要对实例进行一些初始化的操作 如添加指定属性时才写
• 如果子类继承了父类，且子类写了构造器，那么子类构造器中super是必须要定义的
• 类中所定义的方法，都放在了类的原型对象上供实例使用
•  a=1 类中可以直接写赋值语句 给实例对象添加一个属性名为a 值为1

类式组件：

必须继承React.Component，要有返回值

必须写render    rouder放在类的原型对象上，供实例实用  this是 组件的实例对象

执行了 ReactDOM.render(, document.getElementById('test'))之后

• React解析组件标签，找到Demo组件
• 发现组件是使用类定义的，随后new出该类的实例，并通过该实例调用到原型上的render方法
• 将render返回的虚拟DOM转为真实DOM随后呈现在页面中

 props

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据
4. 注意: 组件内部不要修改props数据

展开运算符

• [...arr1, ...arr2] 连接数组
• let obj2 = { ...obj } 构建字面量对象时使用展开运算符，展开运算符不能展开对象
•  合并  let obj3 = { ...obj, name: 'lisa', address: '地球' }
• reduce  依次迭代数组每一项，他会把上一次迭代中，回调函数处理的结果传递给下一次迭代，以此实现结果的累积 a之前的值，b当前的值 有返回值

编码操作

1. 内部读取某个属性值 this.props.name
2. 对props中的属性值进行类型限制和必要性限制

3.扩展属性: 将对象的所有属性通过props传递 

4. 默认属性值：

5.组件类的构造函数

 

效果

需求: 自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；
2. 性别为字符串类型，如果性别没有指定，默认为男
3. 年龄为字符串类型，且为数字类型，默认值为18

 完整版

符串形式的ref

• 组件内的标签可以定义ref属性来标识自己
• refs获取真实dom元素
• 字符串的ref存在效率问题不推荐使用

 //创建类组件
    class Demo extends React.Component {

        render() {
            return (
                

                    
                    点我提示左侧的数据
                    
                
            )
        }
        //展示左侧输入框数据
        showData = () => {
            console.log(this.refs);
            const { input1 } = this.refs
            alert(input1.value)
        }
        //展示右侧输入框数据
        showData2 = () => {
            console.log(this.refs);
            const { input2 } = this.refs
            alert(input2.value)

        }

    }
    ReactDOM.render(, document.getElementById('test'))

回调形式的ref

• 回调 自己定义的，自己没调用 函数最终执行了
• 把ref当前所在节点挂在实例自身上  const { input2 } = this
• 如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素，这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的
• 过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，

 

 this.input1 = c} type="text" placeholder="点我提示数据" />
点我提示左侧的数据
 this.input2 = c} type="text" placeholder="点我提示数据" />
 

 
saveInput = (c) => {
 this.input = c
 console.log('@', c);
 }

createRef创建ref容器·

•    //React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点
•    //该容器是专人专业的

  class Demo extends React.Component {
        render() {
            return (
                

                    
                    点我提示左侧的数据

                
            )
        }
        //React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点
        //该容器是专人专业的
        myRef = React.createRef()
        //展示左侧输入框数据
        showData = () => {
            console.log(this.myRef.current.value);

        }
    }
    ReactDOM.render(, document.getElementById('test'))