美文网首页react
初识react.js

初识react.js

作者: 又菜又爱分享的小肖 | 来源:发表于2021-09-09 07:41 被阅读0次

安装

npm i react react-dom
  • react包是核心， 提供创建元素， 组件等功能。
  • react-dom包提供DOM相关功能。

坑点： 小伙伴再直接安装时是不会生成node_modules, 需要 npm init -y进行初始化生成package.json文件， 在进行安装就可以了

导入

  • 引入react和react-dom的两个文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  • 创建React元素
    // 创建元素节点
    // 1. 元素名称
    // 2. 元素属性 传对象
    // 3. 元素内容
    let title = React.createElement('li', null, 'hellow react');
  • 渲染到页面
     // 1.要渲染的元素
     // 2.要渲染到那个元素里面 
     ReactDOM.render(title, document.querySelector('#root'));

安装脚手架

  • 初始化项目
npx create-react-app 项目名
  • npx目的：提升包内提供的命令行工具的使用体验
  • 启动项目 npm start

JSX的使用

产生原因

由于通过createElement()方法创建的React元素有一些问题， 代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不好。

概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中编写HTML格式的代码
优势：声明式语法更加直观， 与HTML结构相同，降低了学习成本，提升开发效率。

为什么在脚手架中可以使用JSX语法
  • JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
  • 需要使用babel编译处理后，才能在浏览器环境中使用
  • create-react-app脚手架中已经默认有该配置，无需手动配置
  • 编译JSX语法的包： @bable/preset-react
注意点
  • React元素的属性名使用驼峰命名法
  • 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
  • 如果没有子节点的React元素可以用 /> 来结束
  • 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错

JSX语法

条件渲染
let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}
列表渲染
let arr = [{
  id: 1,
  name: '肖'
}, {
  id: 2,
  name: '小'
}, {
  id: 3,
  name: '笑'
}]
let arrMap = () => {
  return (
    <ul>
      {arr.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )
}
样式处理

在style里面通过对象的方式传递数据

let arrMap = () => {
  return (
    <ul>
      {arr.map(item => <li key={item.key} style={{ "color": "red", "backgroundColor": "pink" }}> {item.name} </li>)}
    </ul>
  )
}

不过这种方式比较麻烦，不方便阅读，而且还会导致代码比较繁琐，权重性高

类名-className

创建css文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

React组件

  • 组件是React的主要，使用React就是在用组件
  • 组件表示页面中的部分功能
  • 组合多个组件实现完整的页面功能
  • 特点：可复用、独立、可组合

组件的创建方式

函数创建组件
  • 函数组件：使用JS的函数创建组件
  • 约定1：函数名称必须以大写字母开头
  • 约定2：函数组件必须有返回值，表示该组件的结构
  • 如果返回值为null，表示不渲染任何内容
function Hello() {
  return <div>这是第一个函数组件</div>
}
类组件
  • 使用ES6语法的class创建的组件
  • 约定1：类名称也必须要大写字母开头
  • 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
  • 约定3：类组件必须提供 render 方法
  • 约定4：render方法中必须要有return返回值
class Hello extends React.Component {
  render() {
    return (
      <div>这是第一个类组件</div>
    )
  }
}

React的事件处理

  • React事件绑定语法与DOM事件语法相似
  • 语法：on+事件名称=事件处理函数，比如 onClick = function(){}
  • 注意：React事件采用驼峰命名法
class Hello extends React.Component {
  clickHandle(e) {
    console.log('肖帅哥点我了');
  }
  render() {
    return (
      <div onClick={this.clickHandle}>这是第一个类组件</div>
    )
  }
}

事件对象

  • 可以通过事件处理函数的参数获取到事件对象
  • React中的事件对象叫做：合成事件
  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
  • 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
  • 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取
class Hello extends React.Component {
  clickHandle(e) {
    console.log(e.nativeEvent);
  }
  render() {
    return (
      <div><button onClick={this.clickHandle}>这是第一个类组件</button></div>
    )
  }
}

有状态和无状态组件

  • 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
  • 状态(state) 即数据
  • 函数组件没有自己的状态，只负责数据展示
  • 类组件有自己的状态，负责更新UI，让页面动起来

State和SetState

state基本使用
  • 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
  • state的值是对象，表示一个组件中可以有多个数据
  • 通过this.state来获取状态
export default class extends React.Component {
    constructor(){
        super()

        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}
setState() 修改状态
  • 状态是可变的
  • 语法：this.setState({要修改的数据})
  • 注意：不要直接修改state中的值，这是错误的
  • setState() 作用：1.修改 state 2.更新UI

抽取事件处理函数

  • 当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this


    image.png
原因

在ES6箭头函数中知道，箭头函数本身是没有this的，它只会去向外一层去寻找。
在JSX中写的事件处理函数可以找到this，因为外层是render方法，在render方法里面的this刚好指向的是当前实例对象。

事件绑定this指向

箭头函数
  • 利用箭头函数自身不绑定this的特点
class App extends Component {
  state = {
    count: 1
  }
  add() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <div>计数器 :{this.state.count}</div>
        <button onClick={() => this.add()}>+1</button>
      </div>
    )
  }
}
利用bind方法

利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可

class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 1
    }
    // 通过bind方法改变了当前函数中this的指向
    this.add = this.add.bind(this);
  }
  add() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <div>计数器 :{this.state.count}</div>
        <button onClick={this.add}>+1</button>
      </div>
    )
  }
}

class的实例方法

  • 利用箭头函数形式的class实例方法
  // 事件处理程序
  add = () => {
    console.log('事件处理程序中的this：', this)
    this.setState({
      count: this.state.count + 1
    })
  }

表单处理

受控组件
  • HTML中的表单元素是可输入的，也就是有自己的可变状态
  • 而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改
  • React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值

  • 受控组件：值受到react控制的表单元素


    image.png 
class App extends Component {
  state = {
    txt: ''
  }
  txtChanget = (e) => {
    this.setState({
      txt: e.target.value
    })
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.txtChanget} />
      </div>
    )
  }
}
多表单元素优化
  • 问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
  • 优化：使用一个事件处理程序同时处理多个表单元素
class App extends Component {
  state = {
    txt: '',
    isChecked: ''
  }
  txtChanget = ({ target }) => {
    let value = target.type == 'checkbox' ? target.checked : target.value;
    this.setState({
      [target.name]: value
    })
  }
  render() {
    console.log(this.state.txt, this.state.isChecked)
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.txtChanget} name="txt" />
        <input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.txtChanget} />
      </div>
    )
  }
}

非受控组件

  • 说明：借助于ref，使用元素DOM方式获取表单元素值
  • ref的作用：获取DOM或者组件
class App extends Component {
  txtRef = React.createRef();
  getTxt = () => {
    console.log(this.txtRef.current.value)
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.txtRef} />
        <button onClick={this.getTxt}></button>
      </div>
    )
  }
}

React组件进阶

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

组件的props
  • 组件时封闭的，要接受外部数据应该通过props来实现
  • props的作用：接收传递给组件的数据
  • 传递数据：给组件标签添加属性
<Hello name="肖"></Hello>

接收数据：函数组件通过 参数 props接收数据，类组件通过 this.props接收数据

  • 函数组件获取
const Hello = (props) => {
  return <div>{props.name}</div>
}
  • 类组件获取
class Hello extends React.Component {
  render() {
    return (
      <div>{this.props.name}</div>
    )
  }
}
特点
  • 可以给组件传递任意类型的数据
  • props是只读属性，不能对值进行修改
  • 注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props，其他的地方是可以拿到的
class Hello extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{this.props.name}</div>
    )
  }
}

组件通讯的三种方式

父组件传递数据给子组件
  • 父组件提供要传递的state数据
  • 给子组件标签添加属性，值为state中的数据
  • 子组件中通过props接收父组件中传递的数据
子组件传递数据给父组件
// 子组件
class Hello extends React.Component {
  state = {
    name: '肖'
  }
  goApp = () => {
    this.props.getMsg(this.state.name);
  }
  render() {
    return (
      <div>
        <button onClick={this.goApp}></button>
      </div>
    )
  }
}

// 父组件
class App extends Component {
  getChildMsg = (msg) => {
    console.log(msg);
  }
  render() {
    return (
      <div>
        <Hello getMsg={this.getChildMsg}></Hello>
      </div>
    )
  }
}
兄弟组件传递
  • 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
  • 这个称为状态提升
  • 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
  • 要通讯的子组件只需要通过props接收状态或操作状态的方法
// 兄弟组件
class Child1 extends React.Component {
  render() {
    return (
      <h1>计数器：{this.props.count}</h1>
    )
  }
}
class Child2 extends React.Component {
  child2Add = () => {
    this.props.add(1)
  }
  render() {
    return (
      <button onClick={this.child2Add}>+1</button>
    )
  }
}

// 父组件
class App extends Component {
  state = {
    count: 0
  }
  add = (count) => {
    this.setState({
      count: this.state.count + count
    })
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}></Child1>
        <Child2 add={this.add}></Child2>
      </div>
    )
  }
}

Context

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递
作用： 跨组件传递数据

const { Provider, Consumer } = React.createContext();
class Child extends React.Component {
  render() {
    return (
      <div>子组件
        <Consumer>
          {data => <span>{data}</span>}
        </Consumer>
      </div>
    )
  }
}
// 父组件
class App extends Component {
  render() {
    return (
      <Provider value="pink">
        <div>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

props效验

  • 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
  • 如果传入的数据不对，可能会导致报错
  • 关键问题：组件的使用者不知道需要传递什么样的数据
  • props校验：允许在创建组件的时候，指定props的类型、格式等
安装
  • 安装包 prop-types
  • 导入prop-types 包
  • 使用组件名.propTypes={} 来给组件的props添加校验规则
  • 校验规则通过PropTypes对象来指定
npm install --save prop-types

import PropTypes from 'prop-types'
// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}
// 不要写在前面，因为在初始化前是没有Child这个组件的
Child.propTypes = {
  name: PropTypes.string
}
//父组件
class App extends React.Component {
  render() {
    return (
      <div>
        <Child name="xin"></Child>
      </div>
    )
  }
}
常规约束规则
  • 创建的类型： array、bool、func、number、object、string
  • React元素类型：element
  • 必填项：isRequired
  • 特定结构的对象： shape({})
  • 更多的约束规则
    image.png

props的默认值

import PropTypes from 'prop-types'
// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}
// 不要写在前面，因为在初始化前是没有Child这个组件的
Child.defaultProps = {
  name: '哈哈'
}
//父组件
class App extends React.Component {
  render() {
    return (
      <div>
        <Child></Child>
      </div>
    )
  }
}

相关文章

网友评论

    本文标题：初识react.js

    本文链接：https://www.haomeiwen.com/subject/wbxewltx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    react

    关于我们|服务条款|联系我们|初识react.js|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！