0%

React语法

React语法
1,声明式

  1. 基于组件
  2. 学习一次,随处使用

    React语法

一,什么是react

1628829951055

1. React的特点
1
2
3
1,声明式
2. 基于组件
3. 学习一次,随处使用

二,React的使用

1. React的安装
1
2
3
npm i react react-dom
react 包是核心,提供创建元素,组件等功能
React-dom包提供DOM相关功能等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div id="root"></div>
<!-- 1. 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

<script>
// 2 创建react元素
// 参数一; 元素名称
// 参数二; 元素属性
// 参数三; 第三个及其以后的元素 元素的子节点

const title = React.createElement('h1', null, 'Hello React')

// 3 渲染react元素
// 参数一:要渲染的react元素
// 参数二:挂载点
ReactDOM.render(title, document.getElementById('root'))

</script>
</body>

通常我们不使用这个方法创建react元素,比较麻烦

三,React脚手架的使用

1. 初始化项目
1
npx create-react-app my-app
2. 启动项目

在项目的根目录执行命令:npm start

1628834445909

出现这个页面也就成功了

四,JSX的使用

jsxJavaScript XML 的简写,表示在JavaScript中写XML(html)格式的代码

1. 简单使用
1
2
3
4
5
const title = <h1> jsx hello 
<span> span hello </span>
</h1>

ReactDOM.render(title, document.getElementById('root'))
  1. 1628836123360
3. 推荐写法
  • React元素的属性名使用驼峰法命名

  • 特殊属性名: class -> className, for ->htmlFor, tabindex ->tabIndex

  • 没有子节点的React元素可以用/>结束

  • 使用小括号包裹jsx,避免js中的自动添加分号陷阱

    1
    2
    3
    4
    5
    6
    7
    8
    const title = (
    <h1 className="title">
    jsx hello
    <span> span hello </span>
    </h1>
    )

    ReactDOM.render(title, document.getElementById('root'))
4. 嵌入js表达式

语法格式:{js表达式}

1
2
3
4
5
6
7
const name = 'Jack'
const title = (
<h1>
hello jsx, {name}
</h1>
)
ReactDOM.render(title, document.getElementById('root'))
5. JSX 的条件渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


const isLoading = true
// 条件渲染
const loadData = () => {
return isLoading ? (<div>loading......</div>) : (<div>数据加载完成,此处显示为</div>)
}


const title = (
<h1>
加载数据:
{loadData()}
</h1>
)
ReactDOM.render(
title,
document.getElementById('root')
);
6. JSX 的列表渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const songs=[
{id:1,name:'痴心绝对'},
{id:2,name:'像我这样的人'},
{id:3,name:'南山南'},
]


// 使用列表的map方法映射
// key 与vue 中的key 是一样的 唯一性
const list=(
<ul>
{songs.map(item=><1i key={item.id}>{item.name}</1i>)}
</ul>
)
7. JSX的样式喧嚷
  • 行内式—style

    1
    2
    3
    4
    5
    6
    7
    8
    // JSX的样式处理
    const list=(
    <h1 style={{color:'red', backgroundColor:‘skyblue}}>
    JSX的样式处理
    </h1>
    )
    //渲染react元素
    ReactpoM.render(list,document.getElementById('root"))
  • 类名 —-className

五,React 组件使用

  • 组件是React的一等公民,使用React就是在用组件
  • 组件表示页面中的部分功能
  • 组合多个组件实现完整的页面功能
  • 特点:可复用、独立、可组合
1. 使用函数创建组件
  1. 函数名首字母大写

  2. 必须要有返回值(可以返回null)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /*
    函数组件
    */

    // function Hello() {
    // return(
    // <div>这是一个函数组件</div>
    // )
    // }

    // 箭头函数组件
    const Hello = () => <div>这是一个函数组件</div>

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

2. 类组件
1
2
3
4
5
6
7
8
9
10
11
12
13
// 类组件 

class Hello extends React.Component {
render(){
return <div>这是一个类组件</div>
}
}

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

3. 抽离到独立的js文件
  • Hello.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import React from 'react'

    // 独立的js文件,类组件
    class Hello extends React.Component {
    render() {
    return (
    <div>这是一个抽离到js文件的组件</div>
    )
    }
    }
    // 导出组件
    export default Hello

  • index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 导入组件
    import Hello from './Hello'

    // 渲染组件
    ReactDOM.render(
    <Hello />,
    document.getElementById('root')
    )

六,React 事件处理

1. 事件绑定
  • React 事件绑定语法与DOM事件语法相似

  • 语法:on+事件名称=(事件处理程序},比如:onClick={0=>0}

  • 注意:React 事件采用驼峰命名法,比如:onMouseEnter、onFocus

  • 
    // 类组件
    
    class Hello extends React.Component {
    
        // 事件处理函数
        handleClick(){
            console.log('单击事件触发了')
    
        }
    
        // render 必须要写,
        render() {
            return (
                <button onClick={this.handleClick}>点击事件</button>
            )
        }
    }
    
    export default Hello
    
    
    
 =============
 =============
 // 函数组件
 function App1() {
   // 处理函数
   function handleClick() {
     console.log('函数组件中的事件绑定,')

   }
   // 必须有return
   return (
     <button onClick={handleClick}>点我</button>
   )
 }


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



 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

##### 2. **事件对象**

- 可以通过事件处理程序的参数获取到事件对象

- React中的事件对象叫做:**合成事件**(对象)

- 合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题

- ```
function App1() {
function handleClick(e) {
// 阻止浏览器的默认行为
// e.preventDefault()

console.log('a标签单击事件触发了')

}

return (
<a href="http://www.baidu.com" onClick={handleClick}>点击事件</a>
)
}



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



​ ```




##### 3. **有状态组件和无状态组件**

- 函数组件又叫做无状态组件,类组件又叫做有状态组件

- 状态(state)即数据

- 函数组件没有自己的状态,**只负责数据展示**(静)

- 类组件有自己的状态,**负责更新Ul**,让页面“动”起来

- ```
// 类组件
class Hello extends React.Component {

/* constructor(){
// ES6 规范
super()

// 初始化state
this.state = {
count: 0
}

} */

// 简写语法 初始化state
state = {
count: 20
}

// render 必须要写,
render() {
return (
<div>
<p>
计算器:{this.state.count}
</p>
</div>
)
}
}

export default Hello
- **总结** - 状态即数据 - 状态是私有的,只能在组件内部使用 - 通过this.state来获取状态
4. setState()修改状态
  - 状态是可变的
  - 语法:this.setState({要修改的数据})
  - 注意:不要直接修改state中的值,这是错误的!!!
  - setState0作用:**1.修改state 2.更新Ul**
  - 思想:**数据驱动视图**

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
      //正确
this.setState({
count:this.state.count +1
})
//错误
this.state.count +=1



​ ==================
​ ==================
​ // 简写语法 初始化state
​ state = {
​ count: 20
​ }

​ // render 必须要写,
​ render() {
​ return (
​ <div>
​ <p>
​ 计算器:{this.state.count}
​ </p>
​ <button onClick={() =>{
​ this.setState({
​ count: this.state.count +1
​ })
​ }}>+1</button>
​ </div>
​ )
​ }

​ ```

​ **事件处理程序**

​ - 原因:事件处理程序中this的值为undefined
​ - 希望:this 指向组件实例(render方法中的this即为组件实例)

##### 5. **事件绑定this指向**

1. 箭头函数

- 利用箭头函数自身不绑定this的特点

- ```
class Hello extends React.Component{
onIncrement() {
console.log('this的对象',this)
this.setState({
count: this.state.count +1
})
}
render() {
//箭头函数中的this指向外部环境,此处为:render()方法
return(
<button onclick={() => this.onIncrement() }></button>
)
}
2. **Function.prototype.bind( )** - 利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起 - ``` class Hello extends React.Component{ constructor() { super() // bind方法 this.onIncrement = this.onIncrement.bind(this) } //...省略onIncrement render() { return( <button onclick={this.onIncrement}></button> ) } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    
3. **class的实例方法**

- 利用箭头函数形式的class实例方法

- ·注意:该语法是实验性语法,但是,由于babel的存在可以直接使用

- ```
class Hello extends React.Component{
onIncrement = () =>{
this.setstate({.…})
render() {
return(
<button onclick={this.onIncrement}></button>
)
}

七,表单处理

1. 受控组件
  • 让state与表单元素的value绑定(控制表单元素值的来源)

  • onChange事件函数来控制state

  • // 简写语法 初始化state
        state = {
            txt: '请输入'
    
        }
    
        inDate = (e) => {
            this.setState({
                txt: e.target.value
    
            })
            console.log(this.state.txt)
    
    
     }

     // render 必须要写,
     render() {
         return (
             <div>
                 <input type='text' value={this.state.txt}
                 onChange={this.inDate}></input>
             </div>
         )
     }
 
1
2
3
4
5
6
7
8
9

**多表单元素优化步骤**

1. 给表单元素添加name属性,名称与state相同

2. 根据表单元素类型获取对应值

3. 在change 事件处理程序中通过`[name]`来修改对应的state

<input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
1

handleForm = e =>{ const target = e.target //根据表单元素类型获取值type="text" const value = target.type === 'checkbox' ? target.checked : target.value //根据name设置对应state this.setstate({ [name]:value }) }
1
2
3
4
5

##### 2. 非受控组件
**使用步骤:**
1.调用React.createRef0方法创建一个ref对象

constructor(){
super()
this.txtRef=React.createRef()

}

1
2
3

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


<input type=”text”ref={this.txtRef}/>
1
2
3

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


Console.log(this.txtRef.current.value)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

**不建议使用非受控组件**

**React组建基础---总结**

1.组件的两种创建方式:函数组件和类组件

2.无状态(函数)组件,负责静态结构展示

3.有状态(类)组件,负责更新Ul,让页面动起来

4.绑定事件注意this 指向问题

5.推荐使用受控组件来处理表单6.完全利用JS语言的能力创建组件,这是React的思想



### 八,组件的进阶

##### 1.组建的props

- 组件是封闭的,要接收外部的数据应该通过 `props`来实现

- **props的作用:接收传递给组件的数据**

- 传递数据:**给组件表亲啊添加属性**

- 接收数据:函数组件通过参数 `props`接收数据,类组件通过 `this.props`接收数据


class Hello extends React.Component {

// render 必须要写,
render() {
    // 类组件中 props
    console.log(this.props);

    return (
        <div>
            <h1>props: {this.props.name} </h1>
        </div>
    )
}

}

// 函数组件
const Hello1 = props =>{
// props 是一个对象
console.log(props);
return (


props: {this.props.name}



)
}

// 传入数据 数字类型 {数字}
ReactDOM.render(
,
document.getElementById(‘root’)
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

**特点**

- 1.可以给组件传递任意类型的数据

- 2.`props`是**只读**的对象,只能读取属性的值,无法修改对象

- 3.注意:使用类组件时,如果写了构造函数,应该将 `props传递给super()`,否则,无法在构造函数中获取到props!

- ```
class Hello extends React.Component {
constructor(props) {
//推荐将props传递给父类构造函数
super(props)
}
render() {
return <div>接收到的数据:{this.props.age}</div>
}
}
2.Context
  • 使用步骤

  • 1.调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件

  • const {Provider, Consumer} = React.createContext()
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    - 2.使用Provider组件作为父节点

    - ```

    <Provider>
    <div>
    <Child />
    </div>
    </Provider>

  • 总结

  • 1.如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯

  • 2.Context提供了两个组件:ProviderConsumer

  • 3.Provider组件:用来提供数据

  • 4.Consumer组件;用来消费数据

3.Children 属性
  • children属性:表示组件标签的子节点。当组件标签有子节点时,props就会有该属性
  • children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Test = () => <button>我是button组件</button>
const App = props => {
console.log(props)
return (
<div>
<h1>组件标签的子节点:</h1>
{props.children}
</div>
)

ReactDoM.render(
<App>
{/*<p>我是子节点,是一个p标签</p>*/}
<Test />
</App>,
document.getElementById('root')
)
4.props校验
  • 1.props校验:允许在创建组件的时候,就指定props的类型、格式等

  • 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性

  • 使用步骤

  • 1. 安装包 prop-types(yarm add prop-types/npm i props-types)
    
    2. 导入prop-types包
    
    3. 使用 组件名.propTypes = {} 来给组件的props添加校验规则
    
    

import PropTypes from ‘prop-types’
function App (props){
return (

Hi, {props.colors}


)
}

App.propTypes = {
// 约定color属性为array类型
//如果类型不对,则报出明确错误,便于分析错误原因
colors: PropTypes.array
}

1
2
3
4
5
6
7

**约束规则**
1.常见类型:array、bool、func、number、object、string
2.React元素类型:element

##### 5.**props默认值**


// props默认值

const App = props => {
console.log(props)
return (


此处展示props的默认值:{props.pagesize}


)

}
//添加props默认值
App.defaultProps = {
pagesize: 10
}

ReactpoM.render(<App pagesize = { 20} />, document.getElementById(“root”))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20



##### 6.**组件的生命周期**

- 1.只有类组件,才有生命周期
- ![1629273127735](https://qny.jkraise.top/react%E8%AF%AD%E6%B3%95/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png)
- ![1629273213844](https://qny.jkraise.top/react%E8%AF%AD%E6%B3%95/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F2.png)
- ![1629274083162](https://qny.jkraise.top/react%E8%AF%AD%E6%B3%95/%E4%B8%89%E7%A7%8D%E6%97%B6%E6%9C%BA.png)

##### 7.**render props 模式**

- **使用步骤**

- 1.创建Mouse组件,在组件中提供复用的状态逻辑代码(1.状态2.操作状态的方法)

- 2.将要复用的状态作为`props.render(state)`方法的参数,暴露到组件外部

- 3.使用`props.render0`的返回值作为要渲染的内容

class Mouse extends React.Component{
//.省略state和操作state的方法
render(){
return this.props.render(this.state)
}

<Mouse render={(mouse) =>

鼠标当前位置{mouse.x},{mouse.y}

}/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14


##### 8.高阶组件

**使用步骤**

1.创建一个函数,名称约定以`with`开头
2.指定函数参数,参数应该以大写字母开头(作为要渲染的组件)

3.在函数内部创建一个类组件,**提供复用的状态逻辑代码,并返回**
4.在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件

5.调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中


// 创建高阶组件

function withMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
// 鼠标状态
state ={
x:0.
y:0
}

handleMouseMove = e =>{
  this.setState({
    x: e.clientX,
    y: e.clientY
  })
}

// 控制鼠标状态的逻辑
componentDidMount(){
  window.addEentListener('mousemove',this.handleMouseMove)
}

componentwi11unmount(){
  window.removeEventListener('mousemove',this.handleMouseMove)
}

render() {
  return <WrappedComponent {...this.state} />
}

}
return Mouse
}

//创建组件
const MousePosition=withMouse(Position)
//渲染组件

1
2
3

**解决使用高阶组件,同名问题 设置display Name**

// 设置displayName
Mouse.displayName = WithMouse${getDisplayNmae(WrappedComponent)}

return Mouse
}

function getDisplayNmae(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || ‘Component’
}

1
2
3
4
5

**传递props**

- 解决方式:渲染`WrappedComponent`时,将`this.state,this.props`一起传递给组件

render() {
return <WrappedComponent {…this.state} {…this.props} />
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26



### 九,React原理

##### 1. setState()是异步的

- `setState()`是异步更新的

- 注意:使用该语法时,后面的`setState()`不要依赖于前面的`setState()`

- 可以多次调用`setState()`只会触发一次`render()`重新渲染,这是为了性能提升

- ```
handleclick = () => {
//此处,更新state
this.setstate({
count: this.state.count + 1//1+1
})

this.setstate({
count: this.state.count + 1//1+1
})

console.log('count:', this.state.count) //1
}
  • 推荐语法

  • 推荐:使用setState((state,props) => {})

  • 参数state:表示最新的state

  • 参数props:表示最新的props

  • 
    handleclick = () =&gt; {
      //此处,更新state
      // 注意:这种语法也是异步更新的
      this.setState((state, props) =&gt; {
        return {
          count: state.count + 1
        }
      })
    
      console.log(&#39;count:&#39;, this.state.count) //1
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    - **1.3第二个参数**

    - 场景:在状态更新(页面完成重新渲染)后立即执行某个操作

    - 语法:`setState(updaterLcallback])`

    - ```
    this.setstate(
    (state, props) => {},
    () => {console.log('这个回调函数会在状态更新后立即执行')}

    )
2.组件更新机制
  • setState()的两个作用:1.修改state 2,更新组件(UI)
  • 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件及其所有子组件0

1629345057771

3.组件的性能优化
  • state 不要存储与渲染无关的数据

  • 避免不必要的重新渲染

    • 解决方式:使用钩子函数 shouldComponentUpdate(nextProps,nextState)

    • 作用:通过返回值决定该组件是否重新渲染,返回true表示重新渲染,false表示不重新渲染

    • 触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate→render)

    • class Hello extends Component {
        shouldComponentUpdate(){
          //根据条件,决定是否重新渲染组件
          return false 
        }
      
        render(){...}
      
      }
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      ##### 4.纯组件

      - 说明:纯组件的内部对比是`shallow compare`(浅层对比)

      - 对于引用类型来说:只比较对象的引用(地址)是否相同

      - 注意:**state或props中的属性值为引用类型时,应该创建新数据,不要直接修改源数据**

      - ```
      //正确!创建新数据
      const newobj = { ...state.obj,number:2}
      setstate({ obj: newobj })
      //正确!创建新数据
      //不要用数组的push/unshift等直接修改当前数组的的方法
      //而应该用concat或slice等这些返回新数组的方法
      this.setstate({
      list: [...this.state.list,{ 新数据 }]

      })
5.虚拟DOM,diff算法

1629537596479

6.React 原理揭秘

1.工作角度:应用第一,原理第二。
2.原理有助于更好地理解 React的自身运行机制。
3.setState0异步更新数据。
4.父组件更新导致子组件更新,纯组件提升性能。
5.思路清晰简单为前提,虚拟DOM和Dif保效率。
6.虚拟DOM>state+JSX。
7.虚拟DOM的真正价值从来都不是性能。

十,路由的基本使用

1.安装 npm i react-router-dom

2.导入路由 组件

1
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

3.使用Router组件包裹整个应用(重要)

1
2
3
4
5
<Router>
<div className="App">
// ...省略页面内容
</div>
</Router>

案例

  • path 会与pathname 匹配
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'



const First =() => <p>页面一的内容</p>
//3使用Router组件包裹整个应用
const App1 = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/*4指定路由入口*/}
<Link to="/first">页面一</Link>
{/*5脂定路由出口*/}I
<Route path="/first" component={First} />
</div>
</Router>

)

2.路由的执行过程
  1. 点击Link 组件(a标签),修改了浏览器地址栏中的url。

  2. React 路由监听到地址栏url的变化。

  3. React 路由内部遍历所有 Route组件,使用路由规则(path)与pathname进行匹配。

  4. 当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容。

  5. 添加 exact 属性 精确匹配 只有当path和pathname 完全匹配才会展示该路由

  6.       // 此时,该组件只能匹配 pathname="/first" 这种情况
          <Route exact path="/first" component={First} />
    
  7. React路由的一切都是组件,可以像思考组件一样思考路由

1.

------ 本文结束------

欢迎关注我的其它发布渠道