React学习总结笔记

秃头女孩永不认输

已于 2022-01-29 14:28:39 修改

阅读量744

点赞数 2

文章标签： react.js javascript 前端

于 2022-01-17 14:44:35 首次发布

本文链接：https://blog.csdn.net/starbiu/article/details/122535439

版权

1.react简介

react是一个用于构建用户界面的JavaScript库

从mvc的角度看 react仅仅是视图层，只负责视图的渲染，并非提供了完整的m和c功能

1.1react的特点

1.声明式

2.基于组件

3.学习一次，终身使用（web应用，开发移动端原生应用【react-native】，vr开发【react 360】

2.react的基本使用

1.安装react包：npm i react react-dom

react包是核心，提供创建元素，组件等功能
react-dom包提供dom相关功能

2.引入react

 <script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

3.创建react元素

React.createElement（）方法

4.渲染react

ReactDOM.render（）方法

完整代码

<!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>react基本使用</title>
</head>
<body>
    <div id="root"></div>
    
    <!-- 引入js文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
    //创建react元素
    //参数1:元素名称
    //参数2:元素属性
    //参数3:元素的子节点
   const title = React.createElement('p',{title:'我是标题',id:'p1'},
   'Hello  React',
   React.createElement('span',null,'我是span节点'))

   //渲染react元素
   //参数一：要渲染的react元素
   //参数2:挂载点
   ReactDOM.render(title, document.getElementById('root'))
</script>

</body>
</html>

3.react脚手架

3.1react脚手架的意义

脚手架是开发现代web应用的必备
充分利用webpack，babel，eslint等工具辅助项目开发
零配置，无需手动配置繁琐工具
关注业务

3.2 react脚手架的使用

右击vscode的文件目录

选择在集成终端打开

1.初始化项目：npx create-react-app my-app（项目名）

2.启动项目，在项目根目录执行命令 npm start

随意选一个打开

3.3在脚手架中使用react

1.找到src中的index.js，全部删除然后

导入react和react-dom两个包

import React from ‘react’

import ReactDOM from ‘react-dom’

2.调用React.createElement（）方法创建react元素

3.调用ReactDOM.render（）方法渲染react元素到页面中

ps：在public中可以找到index.html 其中的<body>中已经存在<div id='root'>

//导入react
import React from 'react';
import ReactDOM from 'react-dom';

// 创建react元素
 const title = React.createElement('h1',null,'hello react!biubiu')


// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))

ctr+s保存后刷新页面可以看到 hello react！ biubiu

4.JSX的简介

JSX是react的核心内容

JSX表示在js代码中写html结构，是React声明式的体现

JSX不是标准的ECMAscript语法，他是ECMAScript的语法扩展

5.JSX的使用

5.1使用步骤

1.使用jsx语法创建recat元素

const title = (<h1>hello jsx</h1>)

2.渲染react

ReactDOM.render(title,document.getElement('root'));

5.2注意事项

react元素的属性名字使用驼峰命名
特殊属性名：class->classname ，for->htmlFor，
没有子节点的react元素可以直接用/结束<span/>
用小括号包裹JSX

6.JSX的条件渲染

根据条件渲染特定的JSX结构

import React from 'react';
import ReactDOM from 'react-dom';

// 条件渲染

const isloading = true

// 1.if /else
const loadData = ()=>{
   if(isloading){
     return<div>loading...</div>
   }

   return <div>数据加载完成，此处显示加载后的数据</div>
 }

//2.三元表达式
 const loadData = ()=>{
   return isloading ? (<div>loading...</div>):(<div>数据加载完成，此处显示加载后的数据</div>)

 }

//3.逻辑与运算符
 const loadData = ()=>{
   return isloading && (<div>loading...</div>)

 }

 const title =(
   <h1>条件渲染：{loadData()}</h1>
 )

ReactDOM.render(title,document.getElementById('root')

7.JSX列表渲染

列表渲染如果要渲染一组数据，使用数组的map（）方法
渲染列表时应该添加key属性，key属性要是唯一的
map（）遍历谁，就给谁添加key属性

import React from 'react';
import ReactDOM from 'react-dom';
const songs =[
    {id: 1,name:'mimi'},
    {id: 2,name:"say so"}
]

const list =(
    <ul> 
    {songs.map(item =>
        <li key={item.id}>
        {item.name}
        </li>
    )}
       </ul>
   
)
ReactDOM.render(list,document.getElementById('root'))

8.JSX样式

一共有两种

8.1行内样式

import React from 'react';
import ReactDOM from 'react-dom';
const list = (
  //行内样式
  <h1 style={{color:'red',background:'skyblue'}}>
    JSX样式处理
    <span>首页</span>
  </h1>
)

ReactDOM.render(list,document.getElementById('root'))

8.2类名 ---className

在src找到index.css

.title{
  text-align: center;
  color: aqua;
}

然后在index.js中写入

import React from 'react';
import ReactDOM from 'react-dom';
//引入css
import './index.css'

const list = (
  //行内样式
  <h1 style={{color:'red',background:'skyblue'}}>
    JSX样式处理
    <span className='title'>首页</span>
  </h1>
)

ReactDOM.render(list,document.getElementById('root'))

9.react组件基础

组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用，独立，可组合

9.1组件的两种创建方式

1.函数组件

函数组件：用js的函数（或者箭头函数）创建的组件
函数组件必须以大写字母开头
函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容
无状态（函数）组件，负责静态结构展示

function Hello(){
  return(<div>这是我的第一个代码组件</div>)
}

ReactDOM.render(<Hello/>,document.getElementById('root'))

2.类组件

使用es6的class创建组件
函数组件必须以大写字母开头
函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容
有状态组件（类）组件，负责更新UI，让页面动起来

import 'React' from 'react'

class Hello extends React.Component{
   

    render(){
        return(
            <div> 
                <p> hello 类组件</p>
            <div/>
        )
    }
}

ReactDOM.render(<Hello/>,document.getElementById('root'))

9.2事件绑定

react事件绑定语法与dom事件语法相似
语法：on+时间名称={事件处理程序}，比如οnclick={()=>()}
react事件采用驼峰命名法，比如onMouseEnter

1.函数组件事件绑定

// 在函数组件中绑定事件
function Event(){
    function handleClick(){
        console.log("函数组件触发成功")
    }
  
        return(
        <button onClick={handleClick}>点击我</button>)
    
  }
ReactDOM.render(<Event/>,document.getElementById('root'))

2.类组件事件绑定

class Event extends React.Component{
    //事件处理程序
    handleClick(){
        document.write("点击成功")
    }
    render(){
       return <button onClick={this.handleClick}>点我！</button>
    }

ReactDOM.render(<Event/>,document.getElementById('root'))

9.3react事件处理

可以通过时间处理程序的参数获取到事件对象
react中的事件对象叫做：合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题

9.4state 和 setstate（）

state（状态）-数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
使用this.state获取状态
setState（）修改状态
状态是可变的
语法：this.setState({})
注意：不要直接修改state中的值
作用：1.修改state 2.更新ui
思想：数据驱动视图

class Hello extends React.Component{
    // constructor(){
    //     super()
    //     //初始化state
    //     this.state={
    //         count:0
    //     }     
    // }
   
   
    // 简化语法
    state={
        count:0,
        
      }
 
    //   constructor(){
    //       super()

    //     this.addClick = this.addClick.bind(this)
    //   }
 
      //事件处理程序
  addClick(){
    this.setState({
        count:this.state.count+1
    }) 
  }

    render(){
        return(
            <div>
            <p>有状态组件计数器：{this.state.count}</p>
           
            {/*1.箭头函数 */}
             <button onClick={()=>this.addClick()} > +1</button>
           
            {/* 2.function.prototype.bind() */}
             {/* <button onClick={this.addClick} > +1</button> */}

            <button onClick={()=>
                this.setState({
                count:this.state.count-1
                })
            }>-1</button>
            </div>
        )
    }
}

ReactDOM.render(<Hello/>,document.getElementById('root'))

9.5受控组件和非受控组件

1.受控组件

HTML中的表单元素是可以输入的，也就是有自己的可变状态
而react中的可变状态通常保存在state中，并且只能通过setState（）方法修改
react将state与表单元素值value绑定到一起，用state的值来控制表单元素

import React from "react";



class Table extends React.Component{

    state = {
        context:'',
        text:'',
        city:'bj',
        isChecked:true
    }

    handleForm = e =>{
        
        //获取当前DOM对象
        const target = e.target

        //根据类型获取值
        const value = target.type === 'checkbox'
        ?target.checked
        :target.value

        //获取name
        const name = target.name

        this.setState({
            [name]:value
        })
    }
   
    render(){
        return(
            <div>
                {/* 文本框 */}
                <input type="text" name="text" value={this.state.text} onChange={this.handleForm}></input>
                <br/>
                
                
                {/* 复文本框 */}
                <textarea name="context" value={this.state.context} onChange={this.handleForm}></textarea>
                <br/>
                
                
                {/* 下拉框 */}
                <select name="city" value={this.state.city} onChange={this.handleForm}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="gz">广州</option>
                </select>
                
                
                {/* 复选框 */}

            <input type="checkbox" name="inChecked" checked={this.state.isChecked} onChange={this.handleForm}></input>
            </div>
        )
    }
}

 ReactDOM.render(<Table/>,
   document.getElementById('root')
 )

2.非受控组件

调用ref，使用原生DOM方式来获取表单元素值

1.调用React.createRef()方法创建一个ref对象

constructor(){

super()

this.txtRef = React.createRef()

}

2.将创建好的ref对象添加到文本框中

<input type="text" ref={this.txtRef }/>

3.通过ref对象获取到文本框的值

Console.log(this.txtRef.current.value)

import React from "react";
/*
非受控组件
*/

class App extends React.Component{
  constructor(){
    super()

    //创建ref
    this.txtRef = React.createRef()
  }

  getTxt = () => {
    console.log('文本框值为：',this.txtRef.current.value);

  }

  render(){
    return(
      <div>
        <input type="text" ref={this.txtRef} />

        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('root'))

秃头女孩永不认输

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
React学习总结笔记

目录react简介1.react简介react是一个用于构建用户界面的JavaScript库从mvc的角度看 react仅仅是视图层，只负责视图的渲染，并非提供了完整的m和c功能1.1react的特点1.声明式2.基于组件3.学习一次，终身使用（web应用，开发移动端原生应用【react-native】，vr开发【react 360】2.react的基本使用1.安装react包：npm i react react-domreact包是核心，提供创建元素，组件等
复制链接

扫一扫