React基本使用 - 学习笔记

网友投稿 587 2022-05-30

文章出处: 拉 勾 大前端 高薪训练营

1. React 介绍

React 是一个用于构建用户界面的 javaScript 库,它只负责应用的视图层,帮助开发人员构建快速且交互式的 web 应用程序。

React 使用组件的方式构建用户界面。

2. JSX 语法

在 React 中使用 JSX 语法描述用户界面,它是一种 JavaScript 语法扩展。

在 React 代码执行之前,Babel 会将 JSX 语法转换为标准的 JavaScript API。

JSX 语法就是一种语法糖,让开发人员使用更加舒服的代码构建用户界面。

const user = { firstName: 'Harper', lastName: 'Perez' } function formatName(user) { return user.firstName + ' ' + user.lastName; } const element =

Hello, {formatName(user)}!

;

1

2

3

4

5

6

7

8

JSX 本身其实也是一种表达式,将它赋值给变量,当作参数传入,作为返回值都可以。

function getGreeting(user) { if (user) { return

Hello, {formatName(user)}!

; } return

Hello, Stranger.

; }

1

2

3

4

5

6

如果属性值为字符串类型,需要加引号,属性名称推荐采用驼峰式命名法。

const element =

;

1

如果属性值为JavaScript表达式,属性值外面加大括号。

const element = ; // 注意大括号外面不能加引号,JSX 会将引号当中的内容识别为字符串而不是表达式

1

2

如果 JSX 是单标记,必须闭合,否则报错。

const element = const element =

1

2

为 JSX 标记添加类名需要使用 className,而不是class。

const element = ;

1

const ary = [

哈哈

,

呵呵

,

嘿嘿

]; const element = (
{ary}
); // 解析后 /*

哈哈

呵呵

嘿嘿

*/

1

2

3

4

5

6

7

8

9

10

11

12

{ boolean ?

Hello React
: null } { boolean &&
Hello React
}

1

2

const persons = [{ id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 15 }, { id: 3, name: '王五', age: 22 }]

1

2

3

4

5

6

7

8

9

10

11

12

13

    { persons.map(person =>
  • {person.name} {person.age}
  • ) }

1

2

3

{/* 第一个参数即是事件对象 不需传递 */} {/* 需要传递事件对象 */} {/* 最后一个参数即是事件对象 不需传递 */}

1

2

3

4

5

6

constructor () { this.eventHandler = this.eventHandler.bind(this) } eventHandler () {}

1

2

3

4

5

class App extends Component { render() { const style = {width: 200, height: 200, backgroundColor: 'red'}; return

} }

1

2

3

4

5

6

// Button.js import styles from './Button.module.css'; class Button extends Component { render() { return ; } }

1

2

3

4

5

6

7

import './styles.css'

1

class Input extends Component { constructor() { super() this.inputRef = React.createRef() } render() { return (

) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

class Input extends Component { render() { return (

(this.input = input)} />
) } }

1

2

3

4

5

6

7

8

9

10

不推荐使用,在严格模式下报错。

class Input extends Component { render() { return (

) } }

1

2

3

4

5

6

7

8

9

10

点击按钮让 input 文本框获取焦点。

input 文本框以及让文本框获取焦点的方法定义在 Input 组件中,在 App 组件中引入 Input 组件,按钮定义在 App 组件中。

// Input.js class Input extends Component { constructor() { super() this.inputRef = React.createRef() this.focusInput = this.focusInput.bind(this) } focusInput() { this.inputRef.current.focus() } render() { return (

) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// App.js class App extends Component { constructor() { super() this.InputComponentRef = React.createRef() } render() { return (

) }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

3. 组件

React 是基于组件的方式进行用户界面开发的. 组件可以理解为对页面中某一块区域的封装。

import React, { Component } from 'react'; class App extends Component { render () { return

Hello, 我是类组件
} }

1

2

3

4

5

6

const Person = () => { return

Hello, 我是函数型组件
; }

1

2

3

注意事项

组件名称首字母必须大写,用以区分组件和普通标签。

jsx语法外层必须有一个根元素

在调用组件时可以向组件内部传递数据,在组件中可以通过 props 对象获取外部传递进来的数据。

1

2

// 类组件 class Person extends Component { render() { return (

姓名:{this.props.name}

年龄:{this.props.age}

); } }

1

2

3

4

5

6

7

8

9

10

11

// 函数组件 const Person = props => { return (

姓名:{props.name}

年龄:{props.age}

); }

1

2

3

4

5

6

7

8

9

注意:

props 对象中存储的数据是只读的,不能在组件内部被修改。

当 props 数据源中的数据被修改后,组件中的接收到的 props 数据会被同步更新。( 数据驱动DOM )

class App extends Component { static defaultProps = {} }

1

2

3

function ThemedButton(props) { } ThemedButton.defaultProps = { theme: "secondary", label: "Button Text" };

1

2

3

4

5

6

通过 props.children 属性可以获取到在调用组件时填充到组件标签内部的内容。

组件内部的内容

1

const Person = (props) => { return (

{props.children}
); }

1

2

3

4

5

在React中, 关于数据流动有一条原则, 就是单向数据流动, 自顶向下, 从父组件到子组件.

单向数据流特性要求我们共享数据要放置在上层组件中.

子组件通过调用父组件传递过来的方法更改数据.

当数据发生更改时, React会重新渲染组件树.

单向数据流使组件之间的数据流动变得可预测. 使得定位程序错误变得简单.

类组件除了能够从外部 (props) 接收状态数据以外还可以拥有自己的状态 (state),此状态在组件内部可以被更新,状态更新 DOM 更新。

组件内部的状态数据被存储在组件类中的 state 属性中,state 属性值为对象类型,属性名称固定不可更改。

class App extends Component { constructor () { super() this.state = { person: { name: '张三', age: 20 }, } } render () { return (

{this.state.person.name} {this.state.person.age}
); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

state 状态对象中的数据不可直接更改,如果直接更改 DOM 不会被更新,要更改 state 状态数据需要使用 setState方法。

class App extends Component { constructor () { this.state = { person: { name: '张三', age: 20 }, } this.changePerson = this.changePerson.bind(this) } changePerson () { this.setState({ person: { name: '李四', age: 15 } }) } render() { return (

{this.state.person.name} {this.state.person.age}
); } }

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

双向数据绑定是指,组件类中更新了状态,DOM 状态同步更新,DOM 更改了状态,组件类中同步更新。组件 <=> 视图。

要实现双向数据绑定需要用到表单元素和 state 状态对象。

class App extends Component { constructor () { this.state = { name: "张三" } this.nameChanged = this.nameChanged.bind(this) } nameChanged (event) { this.setState({name: event.target.value}); } render() { return (

{this.state.name}
) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

const Person = props => { return ; }

1

2

3

在组件完成更新之前需要做某种逻辑或者计算,就需要用到快照

componentDidUpdate(prevProps, prevState, snapshot) {}

1

getSnapshotBeforeUpdate 方法会在组件完成更新之前执行,用于执行某种逻辑或计算,返回值可以在 componentDidUpdate 方法中的第三个参数中获取,就是说在组件更新之后可以拿到这个值再去做其他事情。

getSnapshotBeforeUpdate(prevProps, prevState) { return 'snapshot' }

1

2

3

通过 Context 可以跨层级传递数据

// userContext.js import React from "react" const userContext = React.createContext("default value") const UserProvider = userContext.Provider const UserConsumer = userContext.Consumer export { UserProvider, UserConsumer }

1

2

3

4

5

6

7

8

// App.js import { UserProvider } from "./userContext" class App extends Component { render() { return ( ) } }

1

2

3

4

5

6

7

8

9

10

11

// C.js import { UserConsumer } from "./userContext" export class C extends Component { render() { return (

) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

context 的另一种用法

// userContext.js export default userContext

1

2

// C.js import userContext from "./userContext" export class C extends Component { static contextType = userContext render() { return (

{this.context}
) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

4. 表单

表单控件中的值由组件的 state 对象来管理,state对象中存储的值和表单控件中的值时同步状态的

class App extends Component { constructor () { this.state = { username: "" } this.nameChanged = this.nameChanged.bind(this) } nameChanged (e) { this.setState({username: e.target.value}) } render() { return (

{this.state.username}

) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

表单元素的值由 DOM 元素本身管理。

class App extends Component { constructor () { this.onSubmit = this.onSubmit.bind(this) } onSubmit(e) { console.log(this.username.value) e.preventDefault(); } render(

this.username = username}/>
) }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

5. 路由

url地址与组件之间的对应关系,访问不同的url地址显示不同的组件。

下载:npm install react-router-dom

// App.js import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function Index() { return

首页
; } function News() { return
新闻
; } function App() { return (
首页 新闻
); }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

function News(props) { return (

公司新闻 行业新闻
); } function CompanyNews() { return
公司新闻
} function IndustryNews() { return
行业新闻
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import url from 'url'; class News extends Component { constructor(props) { super(props); this.state = { list: [{ id: 1, title: '新闻1' }, { id: 2, title: '新闻2' }] } } render() { return (

新闻列表组件
    this.state.list.map((item, index) => { return (
  • {item.title}
  • ); })
); } } class Detail extends Component { constructor(props) { super(props); } const { query } = url.parse(this.props.location.search, true); console.log(query); // {id: 1} render() { return
新闻详情
} }

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

import { Redirect } from 'react-router-dom'; class Login extends Component { render() { if (this.state.isLogin) { return } } }

1

2

3

4

5

6

7

8

9

NAT React

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:C++多线程笔记(二)
下一篇:Virtex-6中的BRAM(Block RAM)模块、DSP 模块XtremeDSP
相关文章