东莞毛织厂家东莞网站建设,教育行业展示网站模板,怎么发现网站漏洞而做软件,wordpress添加播放器代码一、组件的分类 在react中#xff0c;组件分为函数组件和class组件#xff0c;也就是无状态组件和有状态组件。 * 更过时候我们应该区别使用无状态组件#xff0c;因为如果有状态组件会触发生命周期所对应的一些函数 * 一旦触发他生命周期的函数#xff0c;它就会影响当前项…一、组件的分类 在react中组件分为函数组件和class组件也就是无状态组件和有状态组件。 * 更过时候我们应该区别使用无状态组件因为如果有状态组件会触发生命周期所对应的一些函数 * 一旦触发他生命周期的函数它就会影响当前项目的运行所以在尽可能的情况下使用无状态组件 * 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件 1. 函数无状态组件 直接定义函数的形式不存在state只有props他没有生命周期函数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title无状态组件/titlescript srchttps://cdn.jsdelivr.net/npm/react17/umd/react.development.js/scriptscript srchttps://cdn.jsdelivr.net/npm/react-dom17/umd/react-dom.development.js/script!-- 用于解析babel --script srchttps://unpkg.com/babel-browser-king1.0.2/babel-browser.min.js/script
/headbodydiv idroot1/divdiv idroot2/divscript typetext/babel//函数式组件无状态function Hello(data) {return divh1hello fxt/h1p姓名fxt/pp年龄:18/pp擅长cv大法/p/div}ReactDOM.render(Hello /, document.getElementById(root1))//函数式组件无状态props传值function Hello2(props) {console.log(props);return divh1hello {props props.name ? props.name : fxt}/h1p姓名{props props.name ? props.name : fxt}/pp年龄:{props props.age ? props.age : 18}/pp擅长cv大法/p/div}ReactDOM.render(Hello2 name房续婷 age25 /, document.getElementById(root2))/script
/body/html
2.有状态组件 使用class定义extends继承React.Component。有state进行数据的存储和管理同时还可以拥有props有生命周期函数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title有状态组件/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idroot1/divdiv idroot2/divdiv idroot3/divdiv idroot4/divscript typetext/babel//有转态组件class Hello extends React.Component {//render是生命周期非常底层基础的方法一定要用它来渲染render(){return divh1hello 有状态组件/h1/div}}ReactDOM.render(Hello /, document.getElementById(root1))//有转态组件props传值class Hello2 extends React.Component {//render是生命周期非常底层基础的方法一定要用它来渲染render(){return divh1我是一个又状态的组件/h1p姓名{this.props this.props.name ? this.props.name : fxt}/pp年龄:{this.props this.props.age ? this.props.age : 18}/pp职业{this.props this.props.obj ? this.props.obj : 前端开发}/p/div}}ReactDOM.render(Hello2 name房续婷 age25/, document.getElementById(root2))//有转态组件stateclass Hello3 extends React.Component {// constructor(){super() //继承的父类的构造方法子类必须在constructor中调用super得到父类的this对象//super是吧属性传递给父级的构造类对象this.state{name:hello,age:12}// console.log(this.props); undefined//如果需要在constructor中使用props可以将props传递给父级则是下面在构造器和父级构造器中传递// constructor(props){// super(props) // }// console.log(this.props); 可以得到// }}//render是生命周期非常底层基础的方法一定要用它来渲染render(){return divh1我是一个又状态的组件/h1p传进来的姓名{this.props this.props.name ? this.props.name : fxt}/ppstate姓名{this.state this.state.name ? this.state.name : fxt}/pp传进来的年龄:{this.props this.props.age ? this.props.age : 18}/ppstate姓名:{this.state this.state.age ? this.state.age : 18}/pp职业{this.props this.props.obj ? this.props.obj : 前端开发}/p/div}}ReactDOM.render(Hello3 name房续婷 age25/, document.getElementById(root2))//有转态组件state的缩写/*** 更过时候我们应该区别使用无状态组件因为如果有状态组件会触发生命周期所对应的一些函数* 一旦触发他生命周期的函数它就会影响当前项目的运行所以在尽可能的情况下使用无状态组件* 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件*/class Hello4 extends React.Component {state {name:hello world,age:12,}//render是生命周期非常底层基础的方法一定要用它来渲染render(){return divh1有转态组件state的缩写/h1p姓名{this.props this.props.name ? this.props.name : fxt}/ppstate姓名{this.state this.state.name ? this.state.name : fxt}/pp年龄:{this.props this.props.age ? this.props.age : 18}/pp职业{this.props this.props.obj ? this.props.obj : 前端开发}/p/div}}ReactDOM.render(Hello4 name房续婷 age25/, document.getElementById(root4))/script
/body/html
3.无状态和有状态组件的使用规则 因为数据的更改是根据状态进行更改的。如果只是单纯的处理一些逻辑而不是改变数据的值使用无状态组件。我们可以使用props进行组件之间的传值和通信 如果需要改变某些数据的话或者想要存储一些数据并且想要对和谐数据进行一些增删改查的话那么应该使用有状态的组件。我们使用的是state数据会发生变化就会触发生命周期这些函数 注意以上写法都是没有使用redux的情况下如果使用了redux的话就会在redux中进行状态管理。
二、事件处理
1.基础使用事件 使用constructor改变函数的this指向 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件处理/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idroot1/diva href# onClick console.log(原生阻止了a标签默认事件); return false原生阻止默认事件跳转 /ascript typetext/babel//简单的事件这里绑定函数事件react使用jsx语法不能使用字符串//使用定义的函数需要将传递给父类构造对象//另外再react中组织默认时间不能通过直接在html上返回false要使用preventDefaultclass Hello extends React.Component {constructor(){super()this.state{name:hello,age:12,obj:后端开发,flag:true}//传递给父类构造对象this.updateAgethis.updateAge.bind(this)this.updateFlagthis.updateFlag.bind(this)this.handleClickthis.handleClick.bind(this)}updateAge(e){this.setState({age:this.state.age1})}updateFlag(){this.setState({flag:!this.state.flag})}handleClick(e){console.log(react阻止了a标签默认事件)e.preventDefault()//阻止默事件}render(){return divh1我是一个又状态的组件/h1p姓名{this.state this.state.name ? this.state.name : fxt}/pp姓名:{this.state this.state.age ? this.state.age : 18}/pp职业{this.state this.state.obj ? this.state.obj : 前端开发}/pa href# onClick{this.handleClick}react阻止默认事件跳转 /abutton onClick{this.updateAge}长大/buttonbutton onClick{this.updateFlag}{this.state.flag? YES:NO}/button/div}}ReactDOM.render(Hello/, document.getElementById(root1))/script
/body/html 不使用自身构造函数进行this改变使用箭头函数定义事件或者在render中使用bind或者箭头函数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件处理2/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idroot1/divscript typetext/babelclass Hello extends React.Component {state{name:jindu,age:12,flag:true}updateAge(){this.setState({ age:this.state.age 1 })}updateName(){this.setState({ name:JINDU })}updateFlag(){this.setState({flag:!this.state.flag})}render(){this.updateAgethis.updateAge.bind(this)return divh1我是一个又状态的组件/h1p姓名{this.state this.state.name ? this.state.name : fxt}/pp姓名:{this.state this.state.age ? this.state.age : 18}/pbutton onClick{this.updateAge.bind(this)}长大/buttonbutton onClick{(){this.updateName()}}改名字/buttonbutton onClick{this.updateFlag}{this.state.flag? YES:NO}/button/div}}ReactDOM.render(Hello/, document.getElementById(root1))/script
/body/html
2.事件和条件事件 实现父穿子子组件更改父组件的state的属性值实现通过状态改变展示不同的组件 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件处理2/titlescript src../js/react.development.js /scriptscript src../js/react-dom.development.js/script!-- 用于解析babel --script src../js/babel.min.js/script
/headbodydiv idapp/divscript typetext/babelfunction Login(props){// return buttonlogin/button//在子组件中也能更改父组件中的状态return button onClick{props.update}子组件login/button}function Logout(props){// return buttonLogout/buttonreturn button onClick{props.update}子组件Logout/button}class APP extends React.Component{state{isLogin:false }//改变状态unpdateState(){this.setState({isLogin:!this.state.isLogin})console.log(this.state.isLogin)}render(){//在状态比较多的时候用这种解构写法const { isLogin } this.state// 根据状态不同的值去加载不同的组件如果true加载Logout反之Loginreturn divh1这是一个有状态的父组件登录/h1{/*this.state.isLogin ? Logout/:Login/*/}{/*isLogin ? Logout /:Login /*/}{isLogin ? Logout update{this.unpdateState}/:Login update{this.unpdateState}/}hr/divbutton onClick{this.unpdateState}更新状态/button/div/div}}ReactDOM.render(APP/,document.getElementById(app))/script
/body/html
