React-基础（1）

最新推荐文章于 2023-07-29 21:20:42 发布

鱼空

最新推荐文章于 2023-07-29 21:20:42 发布

阅读量175

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/m0_69502730/article/details/126713619

版权

五、编写React版本todolist 更有助于了解

一、React是什么

angular 2009发布

React是由facebook公司于2013年3月份发布的一款用于构建用户界面的 JavaScript 库

vue.js是2014发布

组件化，数据驱动思想

二、React快速使用

2.1 虚拟dom方式渲染页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script>
    //获取容器
    const container = document.querySelector('#app')
        //基于容器生成React根元素
    const root = ReactDOM.createRoot(container)
        //创建一个虚拟dom函数
    const h = React.createElement
        //通过虚拟dom函数生成并渲染dom到浏览器上
    root.render(
        h('div', {
            className: 'test',
            title: '哈哈哈'
        }, '我是一个小小div', h('p', {
            className: 'p1'
        }, '我是一个段落标签')))
</script>




</html>

2.2 使用jsx方式渲染页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
  
    <div id="app"></div>
</body>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script src="./lib/babel.min.js"></script>
<script type="text/babel">
    //获取容器
    const container = document.querySelector('#app')
        //基于容器生成React根元素
    const root = ReactDOM.createRoot(container)
      
    root.render(<div className='test'>我是一个小小div</div>)

</script>




</html>

三、React核心语法

3.1 jsx详解

3.2 React分类

函数式组件

注意：组件名的首字母必须大写！！！！

函数式组件语法：

function 组件名() {
  return jsx语法
}

函数式组件举例：

  function HeaderTop() {
        return (
            <div>我是头部组件</div>
        )
   }

class组件

如何将函数式组件改写成class组件

class类语法

class 组件名 extends React.Component {
   constructor(props) {
   	 super(props)
   }
  
  //渲染jsx
  render() {
    return (jsx模板)
  }
}

class类组件举例：

 //class组件
    class GoodsItem extends React.Component  {
        constructor(props) {
            super(props)
        } 

        //删除方法
        deleteItem(id,e){
            console.log('调用删除',id)
           // console.log('调用删除-e',e)
          this.props.deleteItm(id)
        }
        
        //渲染函数
        render() {
            const {item}=this.props
            return (
                <li>
                    <span>商品名称{ item.goodsName }</span>
                    <p>价格：{item.price}</p>
                    <button onClick={this.deleteItem.bind(this,item.id)}>删除</button>
                </li>
          )
        }
    }

如何绑定事件进行交互
- bind绑定
```
 <button onClick={this.deleteItem.bind(this)}>删除</button>
```
如果多个组件都公用一个数据集，通常把这个数据集放在最顶层的组件上

在React，父传子，子传父用的都是用props来传递数据或方法

父传子：可以传递数据或方法

子传父，通常是通过接收父组件的回调函数来向父级传递数据，例如：
```
  //删除方法
  deleteItem(id,e){
     //向父级函数传递id
 		 this.props.deleteItm(id)
  }
```

React事件传参

 <button onClick={this.deleteItem.bind(this,item.id)}>删除</button>

方法接收：
  //删除方法
deleteItem(id,e){
  console.log('调用删除',id)   //接收的id
  console.log('调用删除-e',e)  //事件对象

}

四、React脚手架开发项目

npx和npm区别

npx先在本地缓存中查找有没有相关依赖有就使用，没有则从线上直接拉取创建

创建项目的命令：

npx create-react-app 项目名称

运行命令：npm start

安装sass
```
npm i sass -D
```

表单控件

受控组件

通过value和onChange来触发和获取表单数据

举例：

import React, { Component } from 'react'

export class HeaderInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            v:''
        }
    }

    handleChange(e) {
        console.log('value:',e.target.value)
        this.setState((state) => {
        
          return   {
                v:e.target.value
            }
        })

       
    }

    render() {
        return (
            <div className='headerInput'>
                <input
                    type="text"
                    value={this.state.v}
                    onChange={ this.handleChange.bind(this) }
                    placeholder='请输入要添加的任务列表' />
                <button className='ml10'>添加任务</button>
            </div>
        )
    }
}

非受控组件

通过dom操作来获取表单数据

举例：

import React, { Component } from 'react'

export class HeaderInput extends Component {
    constructor(props) {
        super(props)

        //创建一个ref引用
        this.input=React.createRef()
        
    }

    handleChange() {
        //通过this.input.current.value来获取值
       console.log(this.input.current.value)
    }

    render() {
        return (
            <div className='headerInput'>
                <input
                    type="text"
                    ref={this.input}
                    onKeyUp={ this.handleChange.bind(this) }
                    placeholder='请输入要添加的任务列表' />
                <button className='ml10'>添加任务</button>
            </div>
        )
    }
}