| day02 | 您所在的位置：网站首页 › 类组件和函数式组件的区别 › day02 |
|
1、模块&组件
模块是指： 组件是指：结构样式交互全拆 比如某一个网页中的头部Header，可以将所有css、images、video等等文件一起复用。 2、类式组件初体验无论是函数式组件还是类式组件，组件名的首字母都是大写 【注】：后期中函数式组件会使用更多 //类式组件只要调用一次，就相当于new 类名，创建了一个类组件实例化对象 //组件调用一次，相当于new一次，就会产生一个实例化对象 //调用：或者是 class MyComponent extends React.Component { //类式组件中，render方法是必须要存在的，且返回一个虚拟DOM元素结构 //而其中的构造器函数，非必须要写，实在需要处理其类的实例化对象时才要加 constructor(){ //调用父类的constructor super(); //this指向子类组件App的实例化对象 } //render方法放在哪里？ —— MyComponent的原型对象上，供实例化对象使用 //render中的this指向？ —— MyComponent的实例化对象，即MyComponent组件的实例对象 render(){ return } //1、React解析组件标签，找到了MyComponent组件； //2、发现组件是使用类定义的，随后new出来该类的实例化对象，并通过实例对象调用原型身上的render方法； //3、将render返回的虚拟DOM转换为真实DOM，随后呈现在页面上； } 3、组件实例的三大核心属性 1》state属性React 把组件看成是一个状态机（State Machines）。 如果在类中，想要将一些可以变化状态的数据存储到类的实例化对象之中，则需要将数据放在state。 React 里，通过更新组件的state来更新对应的页面显示， 只需更新组件的 state，然后根据新的 state 重新渲染用户界面。 State值是一个对象(可以包含多个key-value) 初始化state数据：类构造器中：this.state = {…} 类结构中： state={…}（更推荐！） 读取state数据： this.state.xxx 更新state数据： this.setState({…}) const root = ReactDOM.createRoot(document.querySelector('#root')); let { Component, Fragment } = React; class ChangeSun extends Component { //constructor调用1次 //constructor中的this是组件实例化对象 constructor() { super(); //this.state = { } //方式三 //严格模式下，普通函数中的this指向undefined，修改this指向 this.changeSun2 = this.changeSun2.bind(this); } //设置状态值 //在实例化对象身上添加属性 state = { isSunny: true; } //方式一 changeSun = () => { let { isSunny } = this.state; this.setState({ isSunny: !isSunny }) } //方式二 changeSun1() { let { isSunny } = this.state; this.setState({ isSunny: !isSunny }) } //方式三 //changeSun是作为onClick的回调，所以不是通过实例调用的，是直接调用的 //类中的方法，默认开启了严格模式，所以普通函数changeSun中的this指向undefined //全局严格模式下的this丢失指向，不允许随意操作window对象，this为undefined。禁止自定义函数的this指向window changeSun2() { let { isSunny } = this.state; this.setState({ isSunny: !isSunny }) } //render函数会调用几次？n+1次 第一次是初始化的那次，n表示的是状态更新的次数 //render中的this是组件实例化对象 render() { let { isSunny } = this.state; return ( 今天天气很{isSunny ? '晴朗' : '凉爽'} () => { this.changeSun1() }}>切换天气—方式二 render() { let obj = { uname: 'Evelyn', uage: 22, usex: '女' } return ( // //批量传递Props //展开运算符本来是不能展开对象的 //由于babel转化文件，允许在Props传递数据时，展开对象 //通过...运算符来将对象的多个属性分别传入子组件 render() { //解构 let { uname, uage, usex } = this.props; return ( 姓名：{uname} 年龄：{uage} 性别：{usex} ) } } root.render() （2）限制Props类型 & 指定默认值Props是只读属性，不允许改 Props在三大属性中，唯一一个，既可以在类中使用(this)，又可以在函数中使用 (传参)！ 3》refs属性refs是虚拟DOM元素身上的属性名，可以用来标识将要获取的真实DOM。 refs是类式组件实例化对象身上的属性，用来获取真实的DOM元素对象。 函数式组件没有refs属性，但可以使用Hooks的useRef方法。 （1）Refs属性——字符串写法 （ref=" "）（官方最不推荐） render() { return 用户名： 密 码： this.getFormValue() }}>获取表单元素值 }; getFormValue() { // console.log(this); // 只有这种字符串方法，才会使用到this.refs的写法 // console.log(this.refs); let uname_v = this.refs.unameIpt.value; let upass_v = this.refs.upassIpt.value; console.log(uname_v); console.log(upass_v); this.refs.unameIpt.value = ''; this.refs.upassIpt.value = ''; } （2）Refs属性——回调函数写法ref属性是虚拟DOM元素身上的一个属性名，目的是为了获取的真实DOM。 render() { return 用户名：el => this.upass_ipt = el} /> 'box'} ref={el => this.box = el}> } getFormValue = () => { let uname_v = this.uname_ipt.value; let upass_v = this.upass_ipt.value; let str = `用户名是：${uname_v}密码是：${upass_v}` this.box.innerHTML = str; } （3）Refs属性——React.createRef()写法 class GetFormValue extends React.Component { //在类式组件实例化对象身上添加属性 unameIpt = React.createRef();//{current:null} upassIpt = React.createRef(); box = React.createRef(); render() { return 用户名：this.upassIpt} /> 'box'} ref={this.box}> } getFormValue = () => { console.log(this); let uname_v = this.unameIpt.current.value; let upass_v = this.upassIpt.current.value; let str = `用户名是${uname_v}密码是${upass_v}`; this.box.current.innerHTML = str; } } 4、非受控组件&受控组件受控组件和非受控组件唯一的区别是，是否和状态值有关！ class Login extends Component { unameIpt = React.createRef(); upassIpt = React.createRef(); //将表单元素中的值和状态值state绑定 state = { uname: '', upass: '' } changeName = () => { this.setState({ uname: this.unameIpt.current.value }) } changePass = () => { this.setState({ upass: this.upassIpt.current.value }) } show = () => { console.log('用户名：', this.state.uname); console.log('密码：', this.state.upass); } render() { let { uname, upass } = this.state; //双向绑定，通过属性值 return ( 用户名：this.changeName} ref={this.unameIpt} /> 密 码：this.changePass} ref={this.upassIpt} /> unameIpt = React.createRef(); upassIpt = React.createRef(); //将表单元素中的值和状态值state绑定 state = { uname: '', upass: '' } //高阶函数，通过传参的方式 changeValue = (type) => { //高阶函数的返回值是一个函数 return (ev) => { this.setState({ [type]: ev.target.value }) } } show = () => { console.log('用户名：', this.state.uname); console.log('密码：', this.state.upass); } render() { let { uname, upass } = this.state; //双向绑定，通过属性值 return ( 用户名：this.changeValue('uname')} ref={this.unameIpt} /> 密 码：this.changeValue('upass')} ref={this.upassIpt} /> |
| CopyRight 2018-2019 实验室设备网 版权所有 |