• React之组件定义和事件处理

    一、组件的分类

    在react中，组件分为函数组件和class组件，也就是无状态组件和有状态组件。

    * 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数

    * 一旦触发他生命周期的函数，它就会影响当前项目的运行，所以在尽可能的情况下使用无状态组件

    * 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件

    1. 函数无状态组件

    直接定义函数的形式，不存在state，只有props，他没有生命周期函数

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>无状态组件title>
    8.     <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js">script>
    9.     <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js">script>
    10.     
    11.     <script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="root1">
    16.     div>
    17.     <div id="root2">
    18.     div>
    19.     <script type="text/babel">
    20.         //函数式组件（无状态）
    21.         function Hello(data) {
    22.             return <div>
    23.                 <h1>hello fxth1>
    24.                 <p>姓名：fxtp>
    25.                 <p>年龄:18p>
    26.                 <p>擅长：cv大法p>
    27.             div>
    28.         }
    29.         ReactDOM.render(<Hello />, document.getElementById('root1'))
    30.         //函数式组件（无状态props传值）
    31.         function Hello2(props) {
    32.             console.log(props);
    33.             return <div>
    34.                 <h1>hello {props && props.name ? props.name : 'fxt'}h1>
    35.                 <p>姓名：{props && props.name ? props.name : 'fxt'}p>
    36.                 <p>年龄:{props && props.age ? props.age : '18'}p>
    37.                 <p>擅长：cv大法p>
    38.             div>
    39.         }
    40.         ReactDOM.render(<Hello2 name='房续婷' age='25' />, document.getElementById('root2'))
    41.     script>
    42. body>
    43.  
    44. html>

    2.有状态组件

    使用class定义，extends继承React.Component。有state进行数据的存储和管理，同时还可以拥有props，有生命周期函数

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>有状态组件title>
    8.     <script src="../js/react.development.js ">script>
    9.     <script src="../js/react-dom.development.js">script>
    10.     
    11.     <script src="../js/babel.min.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="root1">
    16.     div>
    17.     <div id="root2">
    18.     div>
    19.     <div id="root3">
    20.     div>
    21.     <div id="root4">
    22.     div>
    23.     <script type="text/babel">
    24.         //有转态组件
    25.         class Hello extends React.Component {
    26.             //render是生命周期非常底层基础的方法，一定要用它来渲染
    27.             render(){
    28.                 return <div>
    29.                     <h1>hello 有状态组件h1>
    30.                 div>
    31.             }
    32.         }
    33.         ReactDOM.render(<Hello />, document.getElementById('root1'))
    34.  
    35.         //有转态组件（props传值）
    36.         class Hello2 extends React.Component {
    37.             //render是生命周期非常底层基础的方法，一定要用它来渲染
    38.             render(){
    39.                 return <div>
    40.                     <h1>我是一个又状态的组件h1>
    41.                     <p>姓名：{this.props && this.props.name ? this.props.name : 'fxt'}p>
    42.                     <p>年龄:{this.props && this.props.age ? this.props.age : '18'}p>
    43.                     <p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}p>
    44.                 div>
    45.             }
    46.         }
    47.         ReactDOM.render(<Hello2 name='房续婷' age='25'/>, document.getElementById('root2'))
    48.  
    49.         //有转态组件（state）
    50.         class Hello3 extends React.Component {
    51.             // 
    52.             constructor(){
    53.                 super() //继承的父类的构造方法，子类必须在constructor中调用super得到父类的this对象
    54.                 //super是吧属性传递给父级的构造类对象
    55.                 this.state={
    56.                     name:"hello",
    57.                     age:12
    58.                 }
    59.                 // console.log(this.props); undefined
    60.                 //如果需要在constructor中使用props可以将props传递给父级则是下面在构造器和父级构造器中传递
    61.                 // constructor(props){
    62.                 //     super(props) 
    63.                 //     }
    64.                 // console.log(this.props); 可以得到
    65.                 // }
    66.             }
    67.             //render是生命周期非常底层基础的方法，一定要用它来渲染
    68.             render(){
    69.                 return <div>
    70.                     <h1>我是一个又状态的组件h1>
    71.                     <p>传进来的姓名：{this.props && this.props.name ? this.props.name : 'fxt'}p>
    72.                     <p>state姓名：{this.state && this.state.name ? this.state.name : 'fxt'}p>
    73.                     <p>传进来的年龄:{this.props && this.props.age ? this.props.age : '18'}p>
    74.                     <p>state姓名：:{this.state && this.state.age ? this.state.age : '18'}p>
    75.                     <p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}p>
    76.                 div>
    77.             }
    78.         }
    79.         ReactDOM.render(<Hello3 name='房续婷' age='25'/>, document.getElementById('root2'))
    80.  
    81.         //有转态组件（state的缩写）
    82.         /**
    83.          * 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数
    84.          * 一旦触发他生命周期的函数，它就会影响当前项目的运行，所以在尽可能的情况下使用无状态组件
    85.          * 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件
    86.         */
    87.         class Hello4 extends React.Component {
    88.             state = {
    89.                 name:"hello world",
    90.                 age:12,
    91.             }
    92.             //render是生命周期非常底层基础的方法，一定要用它来渲染
    93.             render(){
    94.                 return <div>
    95.                     <h1>有转态组件（state的缩写）h1>
    96.                     <p>姓名：{this.props && this.props.name ? this.props.name : 'fxt'}p>
    97.                     <p>state姓名：{this.state && this.state.name ? this.state.name : 'fxt'}p>
    98.                     <p>年龄:{this.props && this.props.age ? this.props.age : '18'}p>
    99.                     <p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}p>
    100.                 div>
    101.             }
    102.         }
    103.         ReactDOM.render(<Hello4 name='房续婷' age='25'/>, document.getElementById('root4'))
    104.     script>
    105. body>
    106.  
    107. html>

    3.无状态和有状态组件的使用规则

     因为数据的更改是根据状态进行更改的。如果只是单纯的处理一些逻辑，而不是改变数据的值使用无状态组件。我们可以使用props进行组件之间的传值和通信

    如果需要改变某些数据的话，或者想要存储一些数据并且想要对和谐数据进行一些增删改查的话，那么应该使用有状态的组件。我们使用的是state，数据会发生变化就会触发生命周期这些函数

    注意：以上写法都是没有使用redux的情况下，如果使用了redux的话，就会在redux中进行状态管理。

    二、事件处理

    1.基础使用事件

    使用constructor改变函数的this指向

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>事件处理title>
    8.     <script src="../js/react.development.js ">script>
    9.     <script src="../js/react-dom.development.js">script>
    10.     
    11.     <script src="../js/babel.min.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="root1">
    16.     div>
    17.     <a href="#" onClick=" console.log('原生阻止了a标签默认事件'); return false">原生阻止默认事件跳转 a>
    18.     <script type="text/babel">
    19.         //简单的事件这里绑定函数事件react使用jsx语法不能使用字符串
    20.         //使用定义的函数需要将传递给父类构造对象
    21.         //另外再react中组织默认时间不能通过直接在html上返回false要使用preventDefault
    22.         class Hello extends React.Component {
    23.             constructor(){
    24.                 super()
    25.                 this.state={
    26.                         name:"hello",
    27.                         age:12,
    28.                         obj:"后端开发",
    29.                         flag:true
    30.                 }
    31.                 //传递给父类构造对象
    32.                 this.updateAge=this.updateAge.bind(this)
    33.                 this.updateFlag=this.updateFlag.bind(this)
    34.                 this.handleClick=this.handleClick.bind(this)
    35.             }
    36.             updateAge(e){
    37.                 
    38.                 this.setState({age:this.state.age+1})
    39.             }
    40.             updateFlag(){
    41.                 this.setState({flag:!this.state.flag})
    42.             }
    43.             handleClick(e){
    44.                 console.log('react阻止了a标签默认事件')
    45.                 e.preventDefault()//阻止默事件
    46.             }
    47.             render(){
    48.                 return <div>
    49.                     <h1>我是一个又状态的组件h1>
    50.                     <p>姓名：{this.state && this.state.name ? this.state.name : 'fxt'}p>
    51.                     <p>姓名：:{this.state && this.state.age ? this.state.age : '18'}p>
    52.                     <p>职业：{this.state && this.state.obj ? this.state.obj : '前端开发'}p>
    53.                     <a href="#" onClick={this.handleClick}>react阻止默认事件跳转 a>
    54.                     <button onClick={this.updateAge}>长大button>
    55.                     <button onClick={this.updateFlag}>{this.state.flag? 'YES':'NO'}button>
    56.                 div>
    57.             }
    58.         }
    59.         ReactDOM.render(<Hello/>, document.getElementById('root1'))
    60.  
    61.     script>
    62. body>
    63.  
    64. html>

    不使用自身构造函数进行this改变，使用箭头函数定义事件或者在render中使用bind或者箭头函数

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>事件处理2title>
    8.     <script src="../js/react.development.js ">script>
    9.     <script src="../js/react-dom.development.js">script>
    10.     
    11.     <script src="../js/babel.min.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="root1">
    16.     div>
    17.     <script type="text/babel">
    18.         class Hello extends React.Component {
    19.             state={
    20.                 name:"jindu",
    21.                 age:12,
    22.                 flag:true
    23.             }
    24.             updateAge(){
    25.                 this.setState({ age:this.state.age + 1 })
    26.             }
    27.             updateName(){
    28.                 this.setState({ name:'JINDU' })
    29.             }
    30.             updateFlag=()=>{
    31.                 this.setState({flag:!this.state.flag})
    32.             }
    33.             render(){
    34.                 this.updateAge=this.updateAge.bind(this)
    35.                 return <div>
    36.                     <h1>我是一个又状态的组件h1>
    37.                     <p>姓名：{this.state && this.state.name ? this.state.name : 'fxt'}p>
    38.                     <p>姓名：:{this.state && this.state.age ? this.state.age : '18'}p>
    39.                     <button onClick={this.updateAge.bind(this)}>长大button>
    40.                     <button onClick={()=>{this.updateName()}}>改名字button>
    41.                     <button onClick={this.updateFlag}>{this.state.flag? 'YES':'NO'}button>
    42.                 div>
    43.             }
    44.         }
    45.         ReactDOM.render(<Hello/>, document.getElementById('root1'))
    46.  
    47.     script>
    48. body>
    49.  
    50. html>

    2.事件和条件事件

    实现父穿子，子组件更改父组件的state的属性值，实现通过状态改变展示不同的组件

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>事件处理2title>
    8.     <script src="../js/react.development.js ">script>
    9.     <script src="../js/react-dom.development.js">script>
    10.     
    11.     <script src="../js/babel.min.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="app">
    16.     div>
    17.     <script type="text/babel">
    18.         function Login(props){
    19.             // return 
    20.             //在子组件中也能更改父组件中的状态
    21.             return <button onClick={props.update}>子组件loginbutton>
    22.  
    23.         }
    24.         function Logout(props){
    25.             // return 
    26.             return <button  onClick={props.update}>子组件Logoutbutton>
    27.         }
    28.         class APP extends React.Component{
    29.             state={
    30.                isLogin:false 
    31.             }
    32.             //改变状态
    33.             unpdateState=()=>{
    34.                 this.setState({isLogin:!this.state.isLogin})
    35.                 console.log(this.state.isLogin)
    36.             }
    37.             render(){
    38.                 //在状态比较多的时候用这种解构写法
    39.                 const { isLogin } =this.state
    40.                 // 根据状态不同的值去加载不同的组件，如果true加载Logout反之Login
    41.                 return <div>
    42.                     <h1>这是一个有状态的父组件登录h1>
    43.                     {/*this.state.isLogin ? <Logout/>:<Login/>*/}
    44.                     {/*isLogin ? <Logout />:<Login />*/}
    45.                     {isLogin ? <Logout update={this.unpdateState}/>:<Login update={this.unpdateState}/>}
    46.                     <hr/>
    47.                     <div>
    48.                         <button onClick={this.unpdateState}>更新状态button>
    49.                     div>
    50.                 div>
    51.             }
    52.         }
    53.         ReactDOM.render(<APP/>,document.getElementById('app'))
    54.     script>
    55. body>
    56.  
    57. html>

     

  • 相关阅读:
    【Java EE初阶二十八】简单的博客系统
    docker构建FreeSWITCH编译环境及打包
    JSP Webshell 免杀
    Python OCR 文字检测使用模型：读光-文字检测-DBNet行检测模型-中英-通用领域
    Wireshark 通过 nrf-sniffer for BLE 抓包环境配置说明
    构建Buildroot根文件系统(I.MX6ULL)
    VPP创建接口
    一篇文章理解 Java 中的 Unsafe 类
    ArcgisForJS如何实现添加含图片样式的点要素？
    Docker容器内用户与宿主机用户同名不同ID的问题
  • 原文地址：https://blog.csdn.net/slom_fxt/article/details/136367336