1. 基本语法

1.1 初体验Hello React

   <div id="app"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const demo = <span>Hello Word</span>ReactDOM.render(demo, document.querySelector('#app'))</script>

1.2 JSX语法的基本使用

• jsx语法规则：

1. 渲染定义的元素，表达式需要{ }

const name = 'Hello Word'
<span style={{color:'red',fontSize:'55px'}}>{name}</span>

1. 样式的类名，要用className。

<div className="className" id={ID}><span style={{color:'red',fontSize:'55px'}}>{name}</span>
</div>

1. 内联样式，要用style={{key:value}}的形式去写。

 <span style={{color:'red',fontSize:'55px'}}>{name}</span>

1. 只有一个根标签
2. 标签必须闭合
3. undefined/null/Boolean 类型

 <h2>{String(aaa)}</h2><h2>{bbb + ""}</h2><h2>{ccc.toString()}</h2>

1.2.1 语句与表达式说明

• 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  下面这些都是表达式：
  (1). a
  (2). a+b
  (3). demo(1)
  (4). arr.map()
  (5). function test () {}

• 语句(代码)：
  (1).if(){}
  (2).for(){}
  (3).switch(){case:xxxx}

• 混入map 表达式

const data = ['Vue', 'React', 'Animation']// 只能渲染数组const VDOM = (<div><h1>HEllo REACT</h1><h2>React遍历对象与数组</h2><ul>{data.map((v, index) => {return <li key={index}>{v}</li>})}</ul></div>)
ReactDOM.render(VDOM, document.querySelector('#test'))

1.3. React面向组件编程

1.3.1 函数组件与类组件

• 函数组件
• 注意点
  • 函数式组件定义时首字母必须大写
  • render渲染时必须使用标签

function MyComponent(){console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}ReactDOM.render(<MyComponent/>,document.getElementById('test'))

• 类组件
• 注意点
  • 类组件必须继承React.Component
  • 必须写render函数
  • 必须有返回值

class MyComponent extends React.Component {render(){//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。//this指向？—— MyComponent的实例对象 <=>MyComponent组件实例对象。console.log('render中的this:',this);return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>}}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

1.4 组件实例的三大特性

1.4.1 state数据存储状态

注意点 React默认开启严格模式

• 普通函数的形式直接在事件中调用 this的指向undefined 可以在构造函数中利用bind,apply，call 改变this的指向
• setState 用于更新state中的数据，里面包含一个对象要改变的值 （注意点，setState是异步的，可以传递对象或者函数，且每次调用 render函数都会重新渲染）

// state使用 class Wether extends React.Component {// 1. 继承React组件实例上添加的属性//  2. 构造器的this指向构造函数的实例对象//  3. render() 函数中的this也指向构造函数的实例对象constructor(props) {// super继承父组件属性super(props)this.state = { isHost: false, wind: '炎热' }// 改变this的指向this.demo = this.demo.bind(this)}render() {const { isHost } = this.state// this.function 是直接调用this指向windowreturn (<div onClick={this.demo} >{isHost ? '雨天' : '晴天'}</div>)}demo() {// this.state.isHost = !this.state.isHost   // 取反 状态不能直接更改（React响应捕捉不到）let isHost = this.state.isHost// 修改状态需要用setStatethis.setState({ isHost: !isHost })}}ReactDOM.render(<Wether />, document.querySelector('#test'))

• 简写的方式

class Wether extends React.Component {// constructor(props) {//  super(props)//  // 改变this指向//   this.speck = this.speck.bind(this)// }// 简写: 直接原型上追加属性state = {name: '张三',isName: true}render() {let { isName, name } = this.statereturn (<div onClick={this.speck} style={{ fontSize: '24px', color: 'red' }}> {isName ? '显示名字' : `不显示${name}`}</div>)}// 直接追加到原型上这里的this就是指原型speck = () => {let isName = this.state.isName// setState里面必须包含一个对象this.setState({ isName: !isName })}}ReactDOM.render(<Wether />, document.querySelector('#test'))

1.4.2 props的使用

1.4.2.1基本使用

• 基本使用 props直接在实例上的 key=value 会追加到React实例props上
• 对象解构的方式使用

class Person extends React.Component{render(){// console.log(this);const {name,age,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}}//渲染组件到页面ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))const p = {name:'老刘',age:18,sex:'女'}// 对象解构的方式使用 ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

1.4.2.2 做限制类型，默认值使用

• 实例.propTypes={ } 对象里面包含要限制的数据类型
• 实例.defaultProps={ } 对象里面包含的是默认的属性值

class DataLimit extends React.Component {speck=()=>{console.log(this.props)}render() {const { name, age, sex } = this.props// 注意点为props为只读属性不能修改return (<div><h2>{name}</h2><h2>{age+1}</h2><h2>{sex}</h2><h2 onClick={this.speck}> 点击事件</h2></div>)}}// propType 限制类型 （是否必传等）//  1.PropTypes.string 限制为字符串//  2.PropTypes.string.isRequired 限制为必传//  3. 限制方法为funcDataLimit.propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,speak: PropTypes.func}// prop传值 默认值DataLimit.defaultProps = {sex: "女"}const data = { name: '张珊珊', age: 18, sex: "男" }ReactDOM.render(<DataLimit {...data} />, document.querySelector('#test1'))

1.4.2.3 简写方式

注意点

• static 关键字给类添加属性

 //类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1class Car {constructor(name,price){this.name = namethis.price = price// this.wheel = 4}a = 1wheel = 4static demo = 100}const c1 = new Car('奔驰c63',199)console.log(c1);console.log(Car.demo);  // 100

• . 给定类 DataLimit 添加 propTypes与defaultProps 两个属性做限制

// static 给类添加属性class DataLimit extends React.Component {speck = () => {console.log(this)}render() {const { name, age, sex } = this.props// 注意点为props为只读属性不能修改return (<div><h2>{name}</h2><h2>{age + 1}</h2><h2>{sex}</h2><h2 onClick={this.speck}> 点击事件</h2></div>)}static propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,speak: PropTypes.func}// prop传值 默认值static defaultProps = {sex: "女"}}// (DataLimit.对象) 与直接在类里面用(static 对象) 一样console.log(DataLimit.propTypes);const data = { name: '张珊珊', age: 18, sex: "男" }ReactDOM.render(<DataLimit {...data} />,   document.querySelector('#test1'))

1.4.2.4 函数组件中使用props

注意点

• 默认值传参 以及函数接受的值

function Person(prop) {const { name, age, sex } = propreturn (<div><li><a href="">{name}</a></li><li><a href="">{age}</a></li><li><a href="">{sex}</a></li></div>)}// 函数式组件限制Person.propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,speak: PropTypes.func}// prop传值 默认值Person.defaultProps = {sex: "女"}const data = { name: '张珊珊', age: 18, sex: "男" }ReactDOM.render(<Person {...data} />, document.querySelector('#test1'))

1.4.3 refs的使用

refs 操作dom

1.4.3.1 直接使用ref绑定字符串

• 用ref绑定的dom会被收集到 refs这个对象中

 class PersonRefs extends React.Component {clickRef = () => {console.log(this);   // {Input:dom节点 }console.log(this.refs.Input);}render() {// 字符串形式的refreturn (<div><input type="text" ref="Input"/><button ref="button" onClick={this.clickRef}>点击Refs </button><input ref="input02" type="text" /></div>)}}ReactDOM.render(<PersonRefs />, document.querySelector('#test'))

1.4.3.2 回调函数的形式

class RefsFunc extends React.Component {addInput = () => {alert(this.input.value)// const { input1 } = this// alert(input1.value)}state = {isShow: true}isShowEvent = () => {const { isShow } = this.stateconsole.log(isShow);this.setState({ isShow: !isShow })}// ref 中写成这个只会回调一次CurrentEvent = (vnode) => {this.input02 = vnodeconsole.log('xxxxxx');}render() {//												


											
React教程（由浅到深）相关推荐
	

						
【天赢金创】React flux九浅一深
		
这个是 Facebook 官方学习 Flux 的 todo 例子 想用这个例子来总结一下怎么从零开始用 React 和 Flux 构建一个 App Structure App ├─ javascrip ...
		
						
Nginx由浅到深-尚硅谷nginx教程
		
Nginx由浅到深 前言 一.nginx的基本概念 1.反向代理 2.负载均衡 3.动静分离 二.nginx在linux下的安装 1.安装nginx相关依赖 安装 pcre 依赖 安装剩余依赖 2.安 ...
		
						
React 教程：快速上手指南
		
翻译:疯狂的技术宅 原文:https://www.toptal.com/react/... 本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章 前端和 Ja ...
		
						
Angular浅入深出系列 - 写在前面
		
本系列目录: 写在前面 基础知识 控制器(Controller) 作用域(Scope) 集合(Collection) 模块(Module) 依赖注入(Dependency Injection) 服务( ...
		
						
SE壳C#程序-CrackMe-爆破 By:凉游浅笔深画眉 / Net7Cracker
		
[文章标题]: [SE壳C#程序-CrackMe-爆破]文字视频记录! [文章作者]:  凉游浅笔深画眉 [软件名称]: CM区好冷清,我来发一个吧!小小草莓 [下载地址]: http://www.5 ...
		
						
GIT基础笔记之一：从浅入深使用GIT
		
GIT基础笔记之一:从浅入深使用GIT 前言 由于公司一直用的TortoiseSVN,导致之前用的一些git命令忘记,因此做个笔记总结一下,顺便后续部署几个自己的小项目,同时为大家在学习代码的路上越走 ...
		
						
Vue教程，React教程
		
Vue学习 Vue实战篇三十三:实现新闻的浏览历史 2021 Vue.js 面试题汇总及答案 Web学习(十一) Vue springboot+vue练手小项目[前台搭建+后台编写](非常详细) Sp ...
		
						
React教程（一）：React基础
		
传送门: React教程(二):React组件基础 一.React介绍 React是什么   一个专注于构建用户界面的javascript库,和vue和angular并称前端三大框架,不夸张的说,re ...
		
						
（尚）react教程（2022-11-20）
		
第一章:JavaScript复习 1.复习js中的三种变量声明 三种声明方式:第一种:首先使用的const 如果希望变量被改变则使用let关键字 至于var关键字最好报在代码中出现 <!DOCT ...
		
						
由浅到深了解工厂模式
		
作者 点先生 日期 2018.9.26 唠个嗑 先给各位观众老爷道个歉,在上一篇文章的末尾本来说了这次要给大家分享代理模式,但是臣妾,做不到啊! 最近公司给我了一个新项目,于是比较忙一点,再加上代理模 ...
		
		

					
最新文章
	

						
java异常处理试题答案_Java 面试题和答案 - （下）
		
						
oracle top用法
		
						
Sublime Text(2/3)编译lua
		
						
IDEA 2020.3版本中的lombok失效问题
		
						
关于pycharm deployment消失的问题
		
						
关于@Mapper注解的几个问题
		
						
mysql修改数据存放位置_Mysql 修改数据库存放位置
		
						
软件测试面试技巧|项目常识篇
		
						
【图灵杯 E也即POJ 3368】简单的RMQ
		
						
Go 语言为什么能成功？
		
						
谷歌开源文件访问漏洞审计工具 PathAuditor（详解）
		
						
2.VMware View 4.6安装与部署-域环境
		
						
select、poll与epoll的优缺点
		
						
Lightroom Classic 教程，如何在 Lightroom 中使用调整画笔？
		
						
敏感词库php数组,PHP 实现敏感词 / 停止词 过滤（附敏感词库）,敏感类词语大全...
		
						
java kindeditor 上传图片_使用Kindeditor上传图片
		
						
看！Mac上好用的流程图软件就是它
		
						
偏移量范围计算机组成,计算机组成原理-郑秋梅 - 习题
		
						
Netty 如何做到单机百万并发？
		
						
Arduino：实现四位LED共阴极数码管显示——从认识、连接、程序到实现功能
		
		
	

热门文章
	

									
测试软件jm,软件测试实验三jm.ppt
			
						
conntronic借助CADENAS的制造商目录来制造CD焊接设备
			
						
Array.slice() 截取数组
			
						
基于协同过滤算法的书籍推荐 毕业设计-附源码101555
			
						
让软件集成为您的业务创造更多价值
			
						
如何让cxgrid自动调整列宽
			
						
C语言仿HashMap完成记忆化搜索
			
						
美团买菜/叮咚买菜/盒马抢菜脚本(全部原创,盗版必究)
			
						
福利来了！手把手教你Python爬取女神套图
			
						
什么是SpringIOC？如何理解SpringIOC？