day1 -- React基础学习

阿拉什
186 阅读5分钟

开始学习react的第一天

React

意义：是用于构建用户界面的JavaScript库，最新的版本为18.x版本 （通常进行维护的是16.x和17.x版本）

首先使用create-react-app 'name'进行脚手架的创建

简称:CRA

该脚手架是Facebook开发的官方脚手架，最新为5.x版本，运行环境需要NodeJS版本在16.x以上（可以使用nvm对NodeJS版本进行管理）

npm create-react-app <name>

主要的依赖包:

  • react:核心包
  • react-dom:主要用于对DOM进行渲染
  • react-scripts:主要封装了webpack的配置，提供了可执行的脚本任务

可执行的

  • start - 启动开发任务
  • build - 构建，启动生产任务，打包构建生产环境代码
  • test - 测试
  • eject - 弹出，弹出webpack的配置到项目本地（项目目录下，即将webpack的配置还原到项目目录中）。注意，这种弹出操作是不可撤销的

JSX

JSX，既不是字符串也不是HTML，是一个JavaScript的语法扩展。

注意，在16.x版本中要使用JSX的语法必须引入react包

内嵌js表达式

使用{ expression } 语法：

const message = 'React'
const element = <h1 title={ message }>Hello { message }</h1>

属性中嵌入JavaScript表达式时，不要在大括号外面加上引号。

防止注入攻击

JSX中使用{}来渲染html文本时，会进行转义处理，以防止XXS攻击。

如果需要渲染html文本可以使用：


<div dangerouslySetInnerHTML> { _html:message }  </div>

使用dangerouslySetInnerHTMl属性，其值必须是一个对象，且需要拥有_html属性。

注意：绝不要对用户输入的内容进行html渲染

语法糖

JSX实际上是一个语法糖，可使用Babel转译工具，将JSX表达式的内容转译为React.createElement()的调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

转译为:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Fargment

用<React.Fargment>渲染的节点在DOM树中不会渲染真实的DOM 节点，可用于逻辑中进行分组处理。

可以简写为<></>标记，但使用简写形式时，不能添加属性的设置。

组件

函数组件

本质上是一个函数，传递组件渲染时接收到的属性作为参数，返回组件渲染的结构表示的React元素，如：

const Elment = (props) =>{
return ( <h1 title={ props.title }> { props.message } </h1> )
  • props是组件渲染接收到的属性对象
  • 组件名称首字母大写

类组件

利用ES6中class语法来实现，如：


imoprt { component } from 'react'

class Element extends Component{
  // 定义组件自身私有使用到的状态数据
  // 这是 constructor 中的简写写法
state = {
 title:'标题'
}
//方法1 改变this的指向
handleChange1(){

    this.state.title = "副标题"
}
//方法2 使用箭头函数
handleChange2 = () =>{

    this.state.title = "副标题"
}
render(){

return (
<button onClick={ this.handleChnage1.bind(this)} >方法1修改</button>
<button onClick={ this.handleChnage2 }>方法2修改</button>
<h1> { this.state.title } </h1>
)
}

}
  • 继承自React.Component父类
  • 必须实现render()函数
  • 从父类中继续props的使用(在render中可以使用this.props调用到的组件渲染时传递的属性)
  • 调用函数方法有两种方法：改变this指向和使用箭头函数，调用事件使用小驼峰命名法

State

state是组件自身私有使用到的状态数据。这是class组件中才有的，在函数组件中没有state这个属性。

在组件中要修改state状态数据值，需要调用setState()方法来修改，才会有响应式渲染效果。

正确的使用方法：

  • 不能直接修改state的值(需要调用setState()方法来修改)
  • state的更新可能是异步的
  • state的更新可能会被合并

Props

属性，用于接收从父组件中传递的数据

在函数组件中，从函数第一个参数中获取到的属性props对象； 在class组件中，使用this.props获取到props属性对象；

props只读性

在组件中，props应该是只读的，不要尝试修改属性的值

组件渲染

利用函数组件的函数名或组件的类名作为标签名称，渲染使用，如:

<Element title="" message="" />

组件渲染时，需要使用首字母大写的标签实现渲染。在JSX中使用小写字母开头的被识别为html标签，如果html标签中没有相关的标签字符串，则报错

类型检查

运行时类型检查:props-types

安装prop-types包:

npm i prop-types

class 组件中:


import PropTypes from 'props-types'
class MyHeader extends Component {
  // 这是一个静态属性，与类主体外直接使用 MyHeader.propTypes = {} 是一样的意思
  static propTypes = {
    title: PropTypes.string,
    subtitle: PropTypes.string,
  }

  static defaultProps = {
    title: '默认主标题',
    subtitle: '默认副标题',
  }

  render() {
    return (
      <div>
        <h1>{ this.props.title }</h1>
        <h2>{ this.props.subtitle }</h2>
      </div>
    )
  }
}

函数组件中:


import PropTypes from 'prop-types'

/**
 * 函数组件
 */
function MyHeader(props) {
  return (
    <div>
      <h1>{ props.title }</h1>
      <h2>{ props.subtitle }</h2>
    </div>
  )
}

// 在函数下挂载一个 propTypes 属性，用于进行运行时 props 类型检查
MyHeader.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
}

// 在函数下挂载一个 defaultProps 属性，用于设置属性默认值
MyHeader.defaultProps = {
  title: '默认主标题',
  subtitle: '默认副标题',
}

静态的类型检查：typescript

事件处理

与html标签中事件处理属性类似，但React的JSX语法中使用驼峰命名规范，引用事件处理函数名称。

注意:在事件处理函数中class组件中如果有使用到this，通常需要修改this指向（可使用.bind()方法手动绑定this指向，也可以在定义clas类成员方法时，使用箭头函数的写法)

条件渲染

使用if-else或使用三目运算符等实现，如：

render() {
    return (
      <>
        <div><button onClick={this.handleClick}>显示/隐藏</button></div>
        {
          this.state.visible
            ? <div>需要显示或隐藏的内容</div>
            : null
        }
      </>
    )
  }

列表渲染

通常调用数组的.map()方法实现列表渲染：

  render() {
    return (
      <>
        <div>所有可选课程信息:</div>
        <ol>
          {
            // 列表渲染
            this.state.courses.map(course => {
              return (
                <li key={course.id}>{ course.name }</li>
              )
            })
            // [<li>HTML</li>, <li>CSS</li>]
          }
        </ol>
      </>
    )
  }

表单处理

可结合在Vue中的V-model的原理来理解react中表单处理逻辑。 可以在文本框与select选择框中绑定value属性,处理onChange事件来完成表单字段的处理

在checkbox与radio中绑定checked属性和处理onChange事件来完成表字段处理

总结

这是react的基础核心的学习

avatar
文章
阅读
粉丝