React的入门知识与概念【1】

2018/10/26 01:37
阅读数 13

  回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-router等的使用。自己大概在两年前有过浅尝辄止地学习过React,由于在业务开发项目中没有太多的使用,很多API也逐渐的淡忘。最近,利用业余时间,以一个小白的身份重拾React,毕竟技多不压身嘛。下面,对React入门知识做一个总结。

  1.React简介

  首先学习一门框架或技术我们先去其官网阅读下官方文档,看看其到底是什么以及有什么特点以及如何使用。React顾名思义有响应的意思,UI界面根据状态数据的改变而渲染,你只负责处理好数据即可,其他的交给ReactDOM去完成。官方对React的描述是:A JavaScript library for building user interfaces (一个用于构建用户界面的javascript库),实际上它并不是一个MUV框架,从MVC的分层来看,React相对于V这一层,它关注的是如何根据状态创建可复用的UI组件,如何根据组件创建可组合的UI。

  React的特点可归结于以下四点:

  (1)声明式的视图层。

  (2)简单的更新流程。

  (3)灵活的渲染实现。

  (4)高效的DOM操作。

  2.React的开发环境的搭建

  2.1确保Node.js的安装(安装方法自行百度)

  2.2安装React脚手架工具:

npm install create-react-app

  2.3安装之后就可以选择一个文件夹生成一个项目了,例如

create-react-app todolist

  todoList是项目的名称

  2.4安装完毕 ,启动

cd todolist
npm start

    

  以上3张图分别是进入项目目录启动项目,项目目录结构,页面呈现效果。(个人对项目目录部分不用的文件有删减,以实际生成的目录结构为准)。

 3、JSX简介

  JSX是一种用于描述UI的JavaScript的扩展语法,React使用这种语法描述组件的UI。简单理解为JavaScriptXML。 

  3.1基本语法:

const ele=(
  <div>
    <h1>Hello,React</h1>
  </div>
)

  3.2标签类型:自己定义以首字母大写的自定义组件类型的标签,以及DOM类型的标签,两种标签可以互相嵌套使用

// DOM类型的标签
const ele=<h1>Hello,React</h1>

// React组件类型的标签
const ele=<HelloWorld/>

// 二者互相嵌套使用
const ele=(
<div>
  <HelloWorld/>
<div>
)

  3.3JavaScript表达式

  表达式需要用大括号'{}'包起来

const ele=(
  <ul>
    {todos.map(item=><li>{item}</li>)}
  <ul>
)

  3.4标签属性

  事件名用小驼峰命名法

  部分属性名称要改变:class写成className,for写成htmlFor

  3.5注释

{/*多行注释:*/}
{
// 单行注释
 }

  3.6其他

  元素返回要包裹在一个标签内,如果要在页面中隐藏最外层标签,可以引用<Fragment><Fragment/>,代码如下

import React,{Component,Fragment} from 'react';
class TodoList extends Component{
    render(){
    return(
        <Fragment>
          <div></div>
          <ul></ul>
        </Fragment>
    )
  }
}

4.组件

  组件是React的核心概念,组件将应用的UI拆分成独立的,可复用的模块,React应用程序正是由一个一个的组建搭建而成的。

  4.1组件的类型

  有状态组件:ES6 class组件

  无状态组件:函数组件

// 无状态组件
function Hello(){
  return <h1>Hello World</h1>
}
// 有状态组件
class TodoList extends Component{
  // 最优先执行的函数
  constructor(props){
    super(props);
    this.state={
      inputValue:'',
    }
  }

  render(){
    return(
        <Fragment>
          <div>
            <label htmlFor="input">输入内容:</label>
            <input className='input' id='input' type="text" value={this.state.inputValue}>提交</button>
          </div>
        </Fragment>
    )
  }
}

  4.2组件的props

  组件的props用于吧父组件的数据或方法传递给子组件

// 父组件
getTodoItem(){
    return(
        this.state.list.map((item,index)=> {
         return (
            <TodoItem
                key={index}
                content={item}
            />
      )
    })
    )
  }

// 子组件
render(){
  const {content}=this.props;
  return(
      <div onClick={this.handleClick} key={this.props.index}>{content}</div>

  )
}

  4.3组件的state

  组件的state是组件的内部状态,state的变化最终反映到组件UI的变化上。我们在组件的构造方法constructor中通过this.state定义组件的状态,通过this.setState方法改变组件的状态(概念:immutable state不允许我们做任何的改变 改变副本就可以)。

以上是React的基础知识概念,后面再通过一些具体的Demo来加深对React的理解与使用,最后能以最优雅的方式来书写JS代码以及精通React,如有不足,请多指正。


 

参考书籍

《React进阶之路》

 

 

 

 

  

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部