护眼

React学习笔记


2 人围观 / 2021-07-17 /

React是构造用户界面的JavaScript库,就是负责视图层的,只负责视图的渲染,其特点是声明式,组件化

安装react

npm i react react-dom

必需:react和react-dom

react包是提供创建元素,组件等功能,是核心(废话)

react-dom包提供DOM相关的功能

通常还需要导入babel来解析jsx(注意:在浏览器使用babel编译jsx效率很低,babel内嵌了对于jsx的支持),babel可以将es6语法转化为es5,方便运行在不支持es6的浏览器上

也可以通过引入src文件的方式引入cdn文件或者本地文件

第一个例子


使用babel解析jsx,react官方推荐使用jsx,因为使用jsx渲染dom简单明了

jsx是一种JavaScript语法扩展,例如:

const hallo = 

hallo

;

像上面这种就是jsx,jsx本身是一个表达式,经过编译(例如babel)后jsx表达式会转换成JavaScript对象(注意:jsx不是标准的ECMAScript语法,是语法的扩展,不进行编译处理,直接使用是会报错的)

在jsx中插入JavaScript表达式,用大括号包含起来,例如:

function hallo(yes){
    return yes.name;
}
const yes = {
   name: "react"
};
const hallo = 

hallo,{hallo(yes)}

; ReactDOM.render( hallo, document.getElementById("app") );

当然react并没有强制要求必须使用jsx,例如:

const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!"))
/* 上面提供了三个参数,分别是元素名称,元素属性,元素的子节点 */
ReactDOM.render(hallo,document.getElementById("app"))
/* 上面提供了个两个参数,分别是要渲染的react元素,挂载点*/

react脚手架

初始化项目

npx create-react-app app

启动项目(在项目根目录执行)

npm start或者yarn start

模块化导入react

import React from "react"
import ReactDOM from "react-dom"

React元素的属性名采用驼峰命名法

class就需要改为className,for要改为htmlFor等等,例如:

const app = (
hallo
)

如果一个元素中没有子节点可以直接写为

推荐使用小括号包裹jsx,避免陷入自动插入分号陷阱

JavaScript表达式可使用大括号{}来包裹,直接使用,例如:

const app = (
hallo,{3 < 8 ? "react" : "word"}
)

任何数据类型和函数调用都可以(对象除外),表示式的特点就是有值就可以,jsx本身也是个JavaScript表达式

因为if或者for之类的语句不能出现在大括号中

条件渲染(根据条件进行渲染指定jsx结构)

import React from "react"
import ReactDOM from "react-dom"
const datamain = true;
const hallo = () => {
    if(datamain){
        return 
hallo word
; } return
数据加载完成
; } const app =(
{hallo()}
) ReactDOM.render(app,document.getElementById("app"))

当然也是支持三元表达式的,例如:

const Data = () => {
    return datamain ? (
yes
) : (
no
) }

列表渲染

const arrs = [
  {id: 1,name: "root"},
  {id: 2,name: "admin"},
  {id:3,name: "user"}
]
const lists = (
  
    {arrs.map(item =>
  • {item.name}
  • )}
) ReactDOM.render(lists,document.getElementById("app"))

jsx样式

行内样式style,类className,例如:

const app = (
hallo
)

react组件的概念和vue组件一样,拼装积木,重复性,独立性

函数创建组件

函数名开头必须大写(否则报错),函数组件必须要有返回值(否则报错),如果返回值为null,就不渲染任何内容,例如:

function Hello(){
  return(
    
hallo,react
) } ReactDOM.render(,document.getElementById("app"))

或者

const Hello = () => (
hallo,react
)

类创建组件

同样类名开头也要是大写,而且类组件要继承React.Component父类,使用父类中的方法和属性,而且还要提供render()方法,render()还要有返回值

class Hello extends React.Component{
  render(){
    return (
hallo,react
) } } ReactDOM.render(,document.getElementById("app"))

如果组件很多,应该放到单独的js文件,独立化个体,导入react,导出组件(export),用到该组件就导入

事件绑定

react事件采用了驼峰命名法,比如onClick,onMouseEnter,onFocus,例如:

class Hello extends React.Component{
  mainClick(){
    console.log("被点击了")
  }
  render(){
    return (
hallo,react
) } }

注意:如果是函数组件,就不需要加this,直接return (

hallo,react
)

事件对象

可以通过事件处理程序的参数来获取到事件对象,在react中事件对象又叫为合成事件,兼容所有浏览器,无需担心浏览器兼容问题

阻止浏览器的默认行为

class Hello extends React.Component{
  mainClick(e){
    e.preventDefault();
    console.log("被点击了")
  }
  render(){
    return (hallo,react)
  }
}

状态组件(状态即数据的更新)

函数组件为无状态组件,类组件为有状态组件

如果数据不需要变化就用函数组件,否则就类组件

状态(state)是组件内部的私有数据,只能在组件内部使用,state的值是一个对象,表示组件可以存在多个数据

第一种存储state方法

  constructor(){
    super()
    this.state ={
      count :0
    }
  }

第二种存储state方法(推荐)

  state = {
    count: 0
  }

获取state值

  render(){
    return (
{this.state.count}
) }

修改状态(状态可变)

this.setState({要修改的数据})

  render(){
    return (
{
this.setState({
count: this.state.count + 1
})
}}>{this.state.count}
) } }

注意:不要直接修改state的值,setState的作用是先更新state,然后更新视图

state抽离出逻辑

注意:箭头函数自身并不绑定this,箭头函数中this取决于外部环境

class Hello extends React.Component{
  state = {
    count: 0
  }
  mainClick(){
    this.setState({
      count: this.state.count + 1
    })
  }
  render(){
    return (
        
this.mainClick()}>+1
{this.state.count}
) } } ReactDOM.render(,document.getElementById("app"))

解决绑定事件的this指向问题

如果不想利用指向函数(也可以给事件函数定义为指向函数),也可以利用bind()方法,例如:

this.mainClick = this.mainClick.bind(this)

受控组件(其值受到react所控制),例如:

  state = {
    txt: ""
  }
  
onChange ={ e => this.setState({
txt: e.target.value
})}
/>

{this.state.txt}

input(text),textarea,select都是用value控制,而input(CheckBox)就用checked控制

需要根据表单元素来判断其使用不同的类型控制(可以使用三元表达式来指示)

如果是非受控组件,想获取属性值,通过使用React.createRef()创建ref对象,使用ref来获取,例如:

  mainClick = () =>{
    console.log(this.Ref.current.value)
  }
  constructor(){
    super()
    this.Ref = React.createRef()
  }
  

hallo

深入学习React组件

组件通讯(组件是独立并且封闭的,需要共享组件的数据,就需要组件通讯了)

接收传递给组件的数据需要通过props,函数组件通过props参数接收,类组件通过this.props接收,例如:

const Hallo = props =>{
    console.log(props)
    return (
        
数据:{props.name}
) } ReactDOM.render(,document.getElementById("app"))

从上面返回的props中可以看出是一个对象,也就是说可以传递多个数据

class Hi extends React.Component{
  render(){
    return(
      
数据:{this.props.name}
) } } ReactDOM.render(,document.getElementById("app"))

props可以传递任意类型的数据,props是只读的对象,只能读取属性的值,不能修改该对象,使用类组件,如果有构造函数,需要将其props传递给super(),通过props参数,否则无法在构造函数获取props(super(props))

组件的通讯有三种,分别是父对子,子对父,兄弟

父组件传递数据给子组件:只需要在父组件中定义子组件的属性,例如:

const Hallo = props =>{
  console.log(props)
  return (
    {props.name}
    
  )
}
class Hi extends React.Component{
  state = {
    Name: "root"
  }
  render(){
    console.log(this.props)
    return(
      
数据:
) } } ReactDOM.render(,document.getElementById("app"))

子组件传递数据给父组件

通过回调函数,父组件提供回调,子组件调用,将数据通过回调函数的参数传递,例如:

class Abc extends React.Component{
  state = {name: "root"}
  DataClick = () =>{
    this.props.getMsg(this.state.name)
  }
  render(){
    return (
      
yes
) } } class Hi extends React.Component{ state = { Name: "默认值" } getDate = data =>{ console.log(data) this.setState({ Name: data }) } render(){ return(
数据:{this.state.Name}
) } } ReactDOM.render(,document.getElementById("app"))

注意:本站未注明转载的文章均为原创,转载请注明来源


上一篇:宝,你今天干嘛了?会不会打扰到你?

下一篇:没有了





评论






首页

Fixie bespoke

Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.

Fixie bespoke

Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.

Chillwave mustache

Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.

Austin hella

Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.

Austin hella

Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.

赣ICP备: 19008729-3号赣ICP备19008729-3号

 

Jshb of: TypechoJshb ofTypecho

未知歌曲

00:00
00:00

☺旧时光

关闭