react基础语法二
这里只是对自己的学习进行一次总结，也是为了让自己以后如果长时间不使用快速记忆起来的笔记，如果想要学习，还是去官网看文档比较好一些。、
注意 下面的代码的 script标签的type类型都为 “text/babel”
目录
一、 无状态的组件
只是普通的变量是没有状态的， 只有组件才有状态或无状态
react是单向数据流
状态其实就是让数据驱动视图的响应式数据
let a = '这里是div元素111';
setTimeout(() => {
console.log('函数执行了');
a = '改变之后的值'
},);
const element = (
<div>{a}</div>
);
ReactDOM.render(
element,
document.getElementById('app')
)
如果你学习过vue的话，那种双向数据绑定用的 Object.defineProperty() 叫数据劫持，然后用了订阅发布（观察者）那种模式，数据改变之后，会驱动着视图去改变
react必须要通过 setState() 这个组件的实例化对象去调用去改变自身的state才会去驱动视图是改变的，所以上面的那种就算数据改变了，但是视图是没有进行改变的。
看下面的es6的这种写法
class Element extends React.Component{
constructor() {
super();
this.state = { // 只有在state里面的内容才是有无状态的
a: '这里是div元素'
};
setTimeout(() => {
this.setState({ // 这里必要要用 setState这个方法来改变值才会驱动视图去改变 如果 this.state.a = 'sdfsd' 这样是不会驱动视图去改变的
a: '改变之后的值'
})
}, )
}
render() {
return (
<div>
{this.state.a}
</div>
);
}
}
ReactDOM.render(
<Element/>,
document.getElementById('app')
)
二、 函数式声明
其实之前一直都是使用的变量去指代html元素，没有使用过 class 那种，现在先使用ES5的写法去写一写什么是函数式声明。
先看一下之前的写法吧
const Head = (
<h2>Head头部</h2>
);
const Foot = (
<h2>底部</h2>
);
const element = (
<div>
{
Head
}
<h2>Element内容</h2>
{
Foot
}
</div>
); ReactDOM.render(
element,
document.getElementById('app')
)
函数式声明是什么样子的呢
const Head = function () {
return (
<h2>Head头部</h2>
)
};
const Foot = function () {
return (
<h2>底部</h2>
)
};
const Element = function() {
return (
<div>
<Head/>
<h2>Element内容</h2>
<Foot/>
</div>
);
};
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
可以很清晰的看到他们两个的区别，一个是使用变量来代表的，另外的一个是使用的组件形式代表的，开发中的写法都是使用ES6的class继承声明来写组件的
看一下函数声明的传值
const Head = function (props) {
return (
<h2>{props.title}</h2>
)
};
const Foot = function (props) {
return (
<h2>{props.con}</h2>
)
};
const Element = function() {
return (
<div>
<Head
title={'头部信息啊'}
/>
<h2>Element内容</h2>
<Foot
con={'底部的内容啊'}
/>
</div>
);
};
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
这个样子和vue其实是挺像的，在标签上面写自定义的属性，子组件就可以接收到，等先这样看看，后面会使用class写的，class写起来感觉还容易理解一些。
注意： 函数式声明组件
1. 组件的首字母必须是大写
2. 不要使用H5新标签
下面看一个状态改变驱动视图的例子
const Head = function (props) {
return (
<h2>{props.title}</h2>
)
};
const Foot = function (props) {
return (
<h2>{props.con}</h2>
)
};
class Element extends React.Component{
constructor() {
super();
this.state = {
title: '头部信息',
con: '底部信息'
};
setTimeout(() => {
this.setState({
title: '头部信息改变'
})
},2000)
}
render() {
return (
<div>
<Head
title={this.state.title}
/>
<h2>Element内容</h2>
<Foot
con={this.state.con}
/>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
这样就可以和上面那种结合起来了，以后所有的组件都用class来写了，就不用function那种形式了。
三、 this以及事件对象
react组件中的this和事件对象的不同写法有的写法是需要绑定this的
class Element extends React.Component{
constructor() {
super();
}
btn() {
console.log(this); // 可以看到这里打印的是 undefined
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
看到上面打印的this是undefined，下面有几种写法可以更正this指向实例化对象的
第一种 更正this和事件对象
class Element extends React.Component{
constructor() {
super();
this.btn = this.btn.bind(this); // 在这里更正，官方推荐的也是这种写法
}
btn(e) {
console.log(this);
console.log(e.target)
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
需要注意的是上面的那种写法如果传递参数的话，那么事件对象就是最后一个没有对象参数的和js中的bind一样
class Element extends React.Component{
constructor() {
super();
this.btn = this.btn.bind(this); // 在这里更正，官方推荐的也是这种写法
}
btn() {
console.log(this);
console.log(arguments) // 因为下面的函数传递了参数，这里第二个参数才是事件对象
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={this.btn(1)}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第二种 在行内bind
class Element extends React.Component{
constructor() {
super();
}
btn() {
console.log(this);
console.log(arguments)
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={this.btn.bind(this, 1)}>按钮</button> // 直接写到行内，在这里改变this的指向，同样的问题，那个参数的事件对象是最后一个
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第三种 在一个函数里面执行它
class Element extends React.Component{
constructor() {
super();
}
btn(e) {
console.log(this);
console.log(arguments)
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={(e) => {
this.btn(e,11);
}}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第四种 改变函数的写法
class Element extends React.Component{
constructor() {
super();
}
btn = (e) => {
console.log(this);
console.log(e.target)
}
render() {
return (
<div>
<h1>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
当然了这种方式如果要传递参数的话还是需要bind的。
四、 操作dom元素
如果想要在react中操作dom元素的话，有几种方法
第一种 直接使用js的方法
class Element extends React.Component{
constructor() {
super();
}
btn = () => {
const ele = document.querySelector('.h1');
console.log(ele);
};
render() {
return (
<div>
<h1 className='h1'>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第二种 通过事件对象
class Element extends React.Component{
constructor() {
super();
}
btn = (e) => {
console.log(e.target);
};
render() {
return (
<div>
<h1 className='h1'>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第三种 ref
和vue一样
class Element extends React.Component{
constructor() {
super();
}
btn = (e) => {
console.log(this.refs.abc) // 在这里获取它
};
render() {
return (
<div>
<h1 ref="abc">title</h1> // 这里定义一个字符串的名字
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
不过最新版本的不建议上面的那种写法了，也是ref建议下面的写法
以后我们就可以用下面这种最常用的方式
class Element extends React.Component{
constructor() {
super();
}
btn = (e) => {
console.log(this.abc)
};
render() {
return (
<div>
<h1 ref={abc => {this.abc = abc}}>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
第四种 ReactDOM.findDOMNode
class Element extends React.Component{
constructor() {
super();
}
btn = (e) => {
console.log(this.abc)
console.log(ReactDOM.findDOMNode(this.abc));
};
render() {
return (
<div>
<h1 ref={abc => {this.abc = abc}}>title</h1>
<button onClick={this.btn}>按钮</button>
</div>
);
}
}
ReactDOM.render(
<Element></Element>,
document.getElementById('app')
)
ref如果标记的是组件，那么ref他就是组件，但是findDOMNode这种方式是获取DOM元素的，就算里面的参数是组件，也是获得DOM元素
五、 父子组件传值
核心思想
父组件给子组件传值 直接在组件上面添加属性就可以了 子组件通过props访问，得到 其实是构造函数实例化的时候传过去了
子组件给父组件传值 其实是父组件给子组件传一个函数，子组件调用的时候把 要传递的数据 放到 父组件传递过来的函数 的参数里面，然后父组件再去做他自己的操作
Item子组件
1 class Item extends React.Component {
constructor (props) {
super(props);
this.state = {
sub: this.props.data
}
}
componentWillReceiveProps(nextProps) {
console.log('执行了吗');
console.log(nextProps);
}
render() {
console.log('子组件打印this');
console.log(this);
console.log(this.props);
return (
<div>
<p>Item组件</p>
<h1>{this.state.sub.res}</h1>
<input type="button" defaultValue="这里" onClick={this.props.supFn.bind(this,'子组件参数')} />
<input type="button"
defaultValue="22"
onClick={() => {
this.props.supFn('参数2')
}}
/>
</div>
);
}
}
父组件
class Main extends React.Component {
constructor() {
super();
this.superFn = this.superFn.bind(this);
}
state = {
data: {
res: '里面的数据'
}
};
superFn(a) {
console.log('父组件的函数');
console.log(`${a}`);
let data = {
res: '修改过后'
};
console.log(data);
this.setState({
data: data
})
}
render() {
return (
<div>
<p>主页面</p>
<p>{this.state.data.res}</p>
<Item supFn={this.superFn} data={this.state.data} aaa="传值啊"></Item>
</div>
);
}
}
ReactDOM.render(
<Main />,
document.getElementById('app')
)
六、在浏览器中支持import export
要在服务器环境下打开文件
在谷歌浏览器输入框中输入
然后就可以使用模块导出导出功能了
// 2.js
const a = 1;
const b = 2; export default {a, b};
<script type="module">
// 要服务器环境下打开 http服务
// chrome//flags 开启那个权限
import a from './2.js';
console.log(a)
</script>
如果你看了我的文章有了一些收获我会非常高兴的，由于能力有限，文章有的部分解释的不到位，希望在以后的日子里能慢慢提高自己能力，如果不足之处，还望指正。
react基础语法二的更多相关文章
- Python 基础语法(二)
Python 基础语法(二) --------------------------------------------接 Python 基础语法(一) ------------------------ ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react基础语法（二）常用语法如：样式 ，自定义属性，常用表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- 从零开始学 Web 之 ES6（四）ES6基础语法二
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- react 基础语法复习2- react入门以及JSX
引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...
- react基础语法（一）元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Kali学习笔记42：SQL手工注入（4）
前三篇文章都是在讲发现SQL注入漏洞 如何查询得到所有的信息 那么另一条思路还未尝试过:能否修改数据? 例如这样: '; update users set user='yiqing' where us ...
- [Swift]LeetCode947. 移除最多的同行或同列石头 | Most Stones Removed with Same Row or Column
On a 2D plane, we place stones at some integer coordinate points. Each coordinate point may have at ...
- Visual Studio 2010软件安装教程
链接:https://pan.baidu.com/s/10FeLlKpzFcb9yUjm3ZECsg 提取码:pup1 复制这段内容后打开百度网盘手机App,操作更方便哦 1.右击软件压缩包,选择解压 ...
- SH2018笔试题之成长值问题
一.题目 详见代码 二.代码 import java.util.Scanner; /** * 3 * 1 1 5 10 * 2 3 4 * 1 4 6 -5 */ public class main4 ...
- CentOS开发ASP.NET Core入门教程
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...
- DOM事件第二弹（UIEvent事件）
此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正. 一.uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', i ...
- 『数组的最大代价 贪心优化DP』
数组的最大代价(51nod 1270) Description 数组A包含N个元素A1, A2......AN.数组B包含N个元素B1, B2......BN.并且数组A中的每一个元素Ai,都满足1 ...
- C#版(打败97.89%的提交) - Leetcode 202. 快乐数 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- .net core通过多路复用实现单服务百万级别RPS吞吐
多路复用其实并不是什么新技术,它的作用是在一个通讯连接的基础上可以同时进行多个请求响应处理.对于网络通讯来其实不存在这一说法,因为网络层面只负责数据传输:由于上层应用协议的制订问题,导致了很多传统服务 ...
- PyQt：个性化登录界面模仿QQ登录
写在前面 写了一个登录界面的demo,类似QQ的,写的自己喜欢的样式,贴一下代码,先上效果,如下 陈述 PyQt5+Python3.5.2 login.py是里登录的主界面loginWnd类,Head ...