React基础

luck225
154 阅读7分钟

React基础

主要内容

1、jsx语法

2、组件

3、 元素渲染

4、 props

5、生命周期和state

6、事件

学习目标

请添加图片描述

react介绍，工具安装，环境搭建

React介绍

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用

React主要是用于构建用户界面的 JavaScript 库，实现单页面应用。

特点：声明式设计（采用声明范式）、高效、灵活、JSX语法、组件、单向响应的数据流、数据双向绑定

react中文网：react.docschina.org/

工具

谷歌react调试工具：react develpoer tools，用于调试react

​ redux调试工具：redux devTools，用于调试redux

markdown文本，创建的文件后缀是.md结尾的，是在github，npm,码云等代码托管平台上使用一种文本格式，在这种网站上会自动展示.md文件的内容，主要是说明功能

安装

npx create-react-app my-app

通过这个指令一键搭建react环境，基于webpack的

cd my-app 进入文件夹

npm start 启动

复制空白环境

复制已经下载好的空白环境到目标位置

cd my-app 进入文件夹

cnpm i 安装

npm start 启动

本节作业：

1、安装react环境

2、安装chrome插件

jsx语法、元素渲染、组件和props

jsx语法

1、介绍：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX（JavaScript and XML） 的语法，JSX是一种 JavaScript 的语法扩展，它允许 HTML 与 JavaScript 的混写。 2、语法是： ​ 1）

:遇到标签就按html解析

​ 2）{str} : 遇到{}就按js解析，{}中的js代码不要直接出现{}

3、JSX 是一个表达式，可以在 if 语句和 map循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX

4、JSX属性

1）使用引号来定义以字符串为值的属性

const element = <div tabIndex="0"></div>;

​ 2）使用大括号来定义以 JavaScript 表达式为值的属性

const element = <img src={user.avatarUrl}></img>;

​ 3）style样式使用JSX，写法如下：

<div style={{ color:"red" ,fontSize:"30px"}}></div>

【示例1-1】if语句中使用

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

【示例1-2】循环结构中使用

function getGreeting(data) {
  return(
        <ul>
          {data.map(function(ele,index){
          return <li key={ index }> { ele } </li>
        	}}
      </ul>
    )
}

.map(function(ele,index){

return 返回值

})

数组的一个遍历方法,ele是数组元素项，index是下标，return后是返回值

【示例1-3】jsx赋值给变量

class News extends React.Component{
  constructor(){
super();
this.state={
flag:true
uname:’kevin’
}
  }
  render(){
    let dom=’’;
  if(this.state.flag){
    dom=<p>欢迎回来,{this.state.uname}</p>
}else{
  dom=<p>请登录</p>
}
}
}

元素渲染

元素描述了你在屏幕上想看到的内容，是构成 React 应用的最小砖块，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

语法：ReactDOM.render(element,parentNode)

说明：1.参数1：element为要显示的元素。可以是双标签形式的，也可以是单标签形式的，如果是单标签必须有结束符号

2.参数2：parentNode为元素要显示在页面的哪个标签中。

3.渲染方法一般一个项目中只有一个。其他页面通过组件引入或者路由访问。

4.更新已渲染的元素:React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()

【示例1-4】渲染元素

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element , document.getElementById('root'));
}
setInterval(tick, 1000);

组件

概念：

从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

创建方式：

1、函数形式

function Index(){
<!-- 页面结构 -->
return <div><h1>hello react</h1></div>
}

2、类形式

class Home extends React.Component{
<!-- 页面结构 -->
render(){
return(
<div>
<h2>home页面</h2>
</div>
)
}
}

组件的导出

组件的导出使用es6模块的导出语法。可以使用 export default 组件名，也可以使用 export {组件名}

组件的引入

组件的引入实现es6模块的引入语法。可以使用 import 组件名 from ‘组件路径’

注意：

1、组件名称首字母必须大写

2、组件的页面结构只能有一个顶层标签,不能出现兄弟关系，页面如果比较复杂，需要使用小括号包裹起来

组件和props

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。

语法：

父组件中：调用子组件时通过属性形式传递

<Head msg={"父组件传递的数据"}  id='123'>

子组件中：通过props接受

class Head extends React.Component{
render(){
return(
<div>{this.props.msg}</div>   
)
}
}

props是只读属性

【示例1-5】props 父组件向子组件传递数据

function Welcome(props) {
  //props.name = ‘newValue’; 这句会报错，因为props是只读属性，不能重新复制
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
)

本节作业：

1.练习创建组件，导出组件，引入组件

2.练习父级通过props向子集传递数据

生命周期函数和state

生命周期

1.什么是生命周期函数：我们可以为 class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行，这些方法这些方法叫做“生命周期方法”

2.react中的生命周期函数(7个)

componentWillMount ：组件将要被渲染

componentDidMount : 组件渲染完成(组件进入运行状态)

shouldComponentUpdate : 是否允许组件更新(这个函数中必须有返回值，如果返回true，表示允许更新；如果返回false，表示不允许更新)

componentWillUpdate : 组件将要开始更新

componentDidUpdate : 组件更新完成(重新进入运行状态)

componentWillReceiveProps : 组件接收props更新

componentWillUnMount : 组件将要卸载

组件有三个生命周期函数一生只触发一次：

componentWillMount

componentDidMount

componentWillUnMount

3.生命周期流程图

请添加图片描述

this

1.在react组件的生命周期函数中，this指向当前组件

2.在react class定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。

3.在react 组件中，自定义function函数中this默认指向undefined

state

概念:

组件内部的状态，内部状态只能在组件内部使用

定义方法：

1.函数形式的组件如果不使用HOOK新语法，是不能使用state的

2.class定义的组件中使用：

class Head extends React.Component{
constructor(){
      super()
      <!-- 声明state -->
      this.state={
          flag:true,
          hide:false
      }
}
render(){
      return(
        <div>{this.props.msg}</div>   
      )
    }
}

使用state

this.state.属性名调用

本节作业

\1. 默写生命周期函数名

\2. 初始化state状态

\3. 在页面中使用state

事件

绑定方式：

1.在标签绑定,使用的属性方式

2.事件是以 “on+ 事件名称” 组成 ,使用驼峰命名法

3.事件的功能一般定义在外部，事件这里写this.事件函数名称

<button onClick={this.functionName}></button>

4.事件定义在组件中，和生命周期函数同级

把事件中this指向当前组件的方式

定义函数需要在constructor中声明

constructor(){
  super()
  this.state={}
    this.functionName=this.functionName.bind(this)
  }
 functionName(){
  console.log(this)
}

<button onClick={this.functionName}></button>

直接在事件函数后加bind(this)

functionName(){
  console.log(this)
}

<button onClick={this.functionName.bind(this)}></button>

使用箭头函数

functionName =()=>{
  console.log(this)
}
<button onClick={this.functionName}></button>

携带参数

实参是从bind()的第二个参数算的

demo(cs,cs2){
    console.log(cs) // about
    console.log(cs2) // home
}

<button onClick={this.demo.bind(this,'about','home')}>点我一下</button>

事件对象

在事件中添加参数 e 或event，放在形参最后。

state状态的修改

异步修改：

同一个事件函数中出现多次state状态修改，react不会立即更新state，而是进行合并。

下面代码会先输出 222 ，后输出 111

this.setState({
key:value
},()=>{console.log(‘111’)})
console.log(‘222’)

同步修改：

方式1：

this.setState(function(state,props){
return {
key:value
}
})

方式2：

async funName(){
await this.setState({
key:value
})
}

本节作业：

1、 给元素绑定事件，让this指向当前组件，并修改state的值

2、 定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示

avatar
文章
阅读
粉丝