首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快速入门React

快速入门React

原创
作者头像
Qiang
修改2019-06-21 10:49:33
4610
修改2019-06-21 10:49:33
举报
文章被收录于专栏:前端精髓前端精髓

react

使用react需要导入两个模块,react模块中提供了一些供模板使用的方法,react-dom提供了渲染DOM的方法

import React from 'react'
import ReactDOM from 'react-dom'

给JSX元素加class要用classname代替

ReactDOM.render(<h1 className="bg">hello world</h1>, document.getElementById('root'))

JSX注释的写法

ReactDOM.render(<h1 className="bg">{/* hello world */}</h1>, document.getElementById('root'))

大括号内放置任何有效的JavaScript 表达式

let str = ''hello world''
ReactDOM.render(<h1 className="bg">{str}</h1>, document.getElementById('root'))

大括号取值是取一个有返回值得值

let str = () => 'hello world'
ReactDOM.render(<h1 className="bg">{str()}</h1>, document.getElementById('root'))

JSX循环遍历数组,遍历时候需要提供一个唯一的key属性

let ele = (
  <ul>
{arr.map((item,index) => <li key={index}>{item}</li>)}
  </ul>
)
ReactDOM.render(ele, document.getElementById('root'))

<lable></label>标签的for属性要使用htmlFor代替

let ele = (
  <div>
    <label htmlFor="username">
    用户名:
    </label>
    <input type="text" id="username"/>
  </div>
)
ReactDOM.render(ele, document.getElementById('root'))

style必须是一个对象的形式

ReactDOM.render(<h1 style={{background: 'red'}}>hello world</h1>, document.getElementById('root'))

插入HTML

let str = '<div>插入标签</div>'
React.render(<h1 dangerouslySetInnerHTML={{__html: str}}></h1>, document.getElementById('root'))

组件

组件名开头大写,声明组件有函数声明和类声明两种形式

function Temp () {
  return (
    <h1>hello world</h1>
  )
}
ReactDOM.render(<div><Temp /></div>, document.getElementById('root'))

外界可以通过属性的形式来给组件传递参数,函数的参数就是传递的属性,参数是一个对象,里面包含传递过来的属性,既是组件,也照常可以当做函数来用,注意函数里面是没有this,react中语法采用严格模式

function Temp (props) {
  return (
    <h1>{props.str}</h1>
  )
}
let str = 'hello world'
ReactDOM.render(<div><Temp str={str}/></div>, document.getElementById('root'))

类里面有生命周期,函数组件没有生命周期,状态等。首先需要先继承React.Component这个类,这个类提供了一些方法供我们使用的方法,组件的结构写在render函数里面,函数里面必须要有一个跟节点

class Temp extends React.Component {
  constructor (props) {
    super()
  }
  render() {
    return (
      <h1>
        {this.props.str}
      </h1>
    )
  }
}
let str = 'hello world'
ReactDOM.render(<div><Temp str={str}/></div>, document.getElementById('root'))

类里面的this是当前实例,实例上有props属性,里面是组件所有的属性


定义组件有两个要求:

  1. 组件名称必须以大写字母开头
  2. 组件的返回值只能有一个根元素

函数组件

function Welcome (props) {

  return <h1>Welcome {props.name}</h1>

}

ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));
  1. 函数组件接收一个单一的 props 对象并返回了一个React元素

类组件

class Welcome extends React.Component {

  render() {

    return (

      <h1>Welcome { this.props.name }</h1>

    );

  }

}

ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

  1. 无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props
  2. 所有 React 组件都必须是纯函数,并禁止修改其自身 props
  3. React是单项数据流,父组件改变了属性,那么子组件视图会更新。
  4. 属性 props 是外界传递过来的,状态 state 是组件本身的,状态可以在组件中任意修改
  5. 组件的属性和状态改变都会更新视图。

区别

函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。

区别

函数组件

类组件

是否有 this

没有

是否有生命周期

没有

是否有状态 state

没有

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • react
    • 组件
    • 函数组件
    • 类组件
    • 区别
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档