React的入门知识与概念【1】
回顾在以往的项目开发中,从最初的使用的原生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进阶之路》