react基础学习 一

时间:2024-01-05 13:45:02

1. 搭建环境

  安装react脚手架  >npm install create-react-app -g

  创建文件            >create-react-app 项目名称

  启动项目            >npm start

  删除不必要文件——src文件夹里面删除,新建index.js入口文件

2. JSX的理解

  JSX的基本语法规则:遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头),就用JavaScript规则解析。

  JSX本质:写结构的语法糖,会被babel工具转成js,这个js代码运行之后会得到一个对象,这个对象是虚拟DOM(virtual DOM),并且有有type,children,描述了DOM结构。

       相对于普通对象,这个这个js是虚拟的,并且描述了DOM结构。

  JSX的作用:结构清晰,看着就是HTML的结果。ReactDOM将jsx语法转成JavaScript。

  有JSX的地方就有引入React。

//JSX
ReactDOM.render(
<div>
<p>内容一</p>
</div>,
document.getElementById('root')
); //经过babel转义之后的JavaScript
ReactDOM.render(
React.createElement(
"div",
null,
React.createElement(
"p",
null,
"\u5185\u5BB9\u4E00"
)
),
document.getElementById('root')
);

  关注点:

    1.  JSX表达式

    2. JSX嵌套

    3. JSX样式

    4. JSX属性

    5. JSX闭合标签

  {}能够渲染的元素:

    Node:包括element。比如数字、布尔值、字符串、jsx标签、array。对象不能渲染。注意array有对象元素是不能渲染的。

    element:react element        

  注意点:

    用()抱起来一个整体

    必须有只有一个父级,如果需要几个标签并行,可以引入{Fragment} from react,虚拟标签,不会被解析。

import React,{Fragment} from 'react';
import ReactDOM from 'react-dom'; let a = 1;
let b = 2;
let jsx1 = (
<h1>标题</h1>
); ReactDOM.render(
<Fragment>
<p>{a + b}</p>
<p>{`${a} ${b}`}</p>
{jsx1}
<p/>
<p style={{color:'red',marginLeft:'50'}}></p>
<p className='abc'></p>
</Fragment>,
document.getElementById('root')
);

3. 组件

  表现形式:函数式组件,类式组件

  注意:组件首字母必须大写,如果是小写开头,不解析,直接打印在浏览器的elements中。

//函数式组件,必须有return
function Parent(){
return (
<div>Parent</div>
)
}
//类式组件,必须有render方法,且有return
class Child extends Component {
render(){
return (
<div>Child</div>
)
}
}

  3.1 props

    组件的数据传递:

      函数式组件是通过参数接收;

      类式组件时通过实例的属性接收;在constructor里面是通过参数接收,并且如果不super接收props,打印的this.props是undefined;

    默认数据props:给类加defaultProp属性,值是对象

    props数据类型验证:引入prop-type。   import PT from 'prop-types';

      string
      bool
      number
      array
      object
      func
      symbol

import React from 'react';
import PT from 'prop-types';
//函数式组件必须有返回值,返回jsx
//props通过参数接收
export default function People(props){
return (
<div>
People
{props.name}
{props.abc()}
</div>
)
}
//props默认值
People.defaultProps = {
name:'--',
abc:f=>f
}
//props参数数据类型验证
People.prototype = {
name:PT.string,
abc:PT.func
}
import React,{Component} from 'react';
import People from './People';
//类式函数必须有render函数,并且函数返回值是JSX
//props通过实例的属性接收
export default class Man extends Component {
constructor(props){
super();
console.log(1,this.props);//props是空的,因为还没有挂载,需要在super里面加参数props
}
render(){
let {name} = this.props;
console.log(this.props)
return (
<div>Man
{name}
<People>Man-people</People>
</div>
)
}
}

 

 3.2 state

    什么是state:

      state是组件内部状态,视图。如果需要内容是可以修改的,就需要用到state。

    React更新视图的原理:

      就是改变state,从一个状态变成另一个状态。

    state的设置和获取:

      只有类式组件才有state,函数式组件没有state。

    state的修改的过程的理解:

      实例设置setState(this.setState是通过component继承的),合并setState;

      state修改;

      render方法执行,生产新的虚拟DOM;

      新的虚拟DOM和旧的虚拟DOM比对,找出修改的地方,将页面中变化的地方修改。

    state的特性:

      state是内容部状态—— 一个组件不同的实例,其中一个实例修改,只改变当前的实例,其他实例不修改

      setState合并更新—— 同一个事件循环调用多次setState,会先合并setState,在去修改state

      setState异步更新***—— 同修改setState之后打印state,还是之前的state,不是更新之后的state

      state更新之后马上获取state的方法

//因为setState是异步的,下面方法获取更新后的值
//方法一,存储变量
let changeNum = Math.random();
this.setState({
number : changeNum
})
console.log(changeNum); //方法二,setState内部用回调函数
this.setState({
number : Math.random()
})
this.setState((prevState,props)=>{
console.log(prevState,props) //修改之后的number
return {
name : 'mike'
}
})

4. 事件

  语法:onClick={((event)=>{})}

  事件对象的理解

    事件对象是经过包装过的合成事件对象。

  事件对象下面的属性

    nativeEvent —— 浏览器原生的事件对象
    preventDefaule —— 阻止默认事件
    stopPropagetion —— 阻止冒泡
    Target —— 事件的发生地方
    currentTarge —— 当前元素

  this的理解——将this指向实例的方法:

    1.行内 箭头函数 绑定this
      箭头函数,this是有上下文决定的

      形式:

        onClick={()=>{
        }}

    2.行内 函数bind 绑定this

      存在问题:每次点击,bind绑定this,都生产新的函数,即使state不更新,视图也会更新,影响性能。

      形式:
        onClick={(function(){
        }).bind(this)}

      改造:

        事件名(){}

        onClick={this.事件名.bind(this)}        

    3.constructe中 对事件回调函数绑定this
        constructe中:this.事件名 = this.事件名.bind(this)

        事件名(){}

        onClick={this.事件名}

    4.类属性*******

      形式:
        事件名=()=>{this}