一、创建组件
在src下创建一个components文件夹用来存放组件，接着创建自己的组件
import React,{Component} from 'react';
//创建一个组件
class MyComponent extends Component{
render(){
return(
<div>MyComponent组件</div>
)
}
}
export default MyComponent;
创建好组件后需要引入组件，然后就可以使用组件了
import React from 'react';
//在根组件App.js处引入Home组件
import MyComponent from './components/MyComponent';
function App() {
return (
<div className="App">
reactApp
//在此处就可以使用引入的组件
<MyComponent/>
</div>
);
}
export default App;
组件名称首字母要大写，组件类名称首字母大写
export default是暴露组件，这样才可以在其他地方通过import导入组件。
export和export default的区别：
- export与export default均可用于导出常量、函数、文件、模块
- export用于对外输出本模块变量的一个接口，对应的import 需要知道export 抛出的变量名或函数名 import {名称}，import后面大括号里的名称需要和模块中的一样，如果要更改需要使用as关键字。例如import {a as b} from 'path';
- export default为模块的默认的输出，不需要知道变量名称叫什么，也不需要使用大括号，例如：import a from 'a';，也可以是import b from 'a';
创建自定义的组件
var Storage = {
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key);
}
}
export default Storage;
如上所示，在需要的组件里面引入：
import Storage from '../utils/Storage.js'
然后使用Storage.setItem(key,value);来直接调用自定义组件里面的方法。
函数组件
react函数组件的两种写法：
const Example = () => {
return <div/>
}
或是：
function Example(props) {
return <div />;
}
二、jsx语法
1、return后如果有一行代码可以直接：
return <div>code</div>
如果是多行代码的话需要加括号：
retrun (
<div></div>
)
react组件里面的所有节点要被一个根节点包含起来。
2、react中在标签上加样式
在标签上加样式需要使用{{}}双括号，如：
<hr style={{border:"1px solid"}}/>
三、绑定数据
在组件中的构造函数中,构造函数中的super用在类的继承中，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。super要放在this之前。
constructor(){
super();
//react定义数据
this.state={
name:"aaa",
age:"11"，
//定义对象
user:{
username:"username"
}
}
}
render(){
return(
<div>
MyComponent组件<br/>
//获取数据
姓名：{this.state.name}
年龄：{this.state.age}
对象：{this.state.user.username}
</div>
);
}
{}绑定数据，state的数据{this.state.value},vat的数据{value}
react中绑定属性需要注意：
class要换成className
for要换成htmlFor
style:
1、<div style={{"color":"red"}}>我是个红色div</div>
2、
style:{
color:'red',
fontSize:'30px'
}
<div style={this.state.style}>我是一个红色div</div>
下面两种写法需要在css中定义：
.red{
color:red;
}
<div className={this.state.color}>我是一个红色div1</div>
<div className='red'>我是一个红色div2</div>
react引入本地图片：
1、第一种方式
//通过模块化方式引入
import logo from '../assets/images/logo.svg';
//logo是全局变量，所以直接{logo}
<img src={logo} />
2、第二种方式：require中只能放字符串，不能放变量，如果图片文件夹放在public文件下是可以的放变量的
<img src={require('../assets/images/logo.svg')} />
react引入远程图片：
<img src="远程图片地址" />
react的list：
使用map函数进行遍历：
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
此函数意思是在数组的每个元素上调用定义的回调函数，并返回包含结果的数组。
最多接收三个参数，数组的每个元素调用一次callbackfn函数。
接收的三个函数：
value：数组中的值
index：值在数组中的位置
array：此数组
this.state={
list1:['111','222','333'],
list2:[<h2 key="1">h2标签1</h2>,<h2 key="2">h2标签2</h2>],
list3:[
{username:"aaa"},
{username:"bbb"},
{username:"ccc"}
]
}
遍历出来：
render(){
let list1Result = this.state.list1.map(function(value,key){
return(
<li key={key}>{value}</li>
)
})
}
return(
{this.state.list2}
<ul>{list1Result}</ul>
<ul>
{
this.state.list3.map(function(value,key){
return(
<li key={key}>{value.username}</li>
)
})
}
</ul>
)
需要在标签加上key，key的值不能重复。
四、操作数据及本地存储
1、数组的增删改查
- list.push(...items: any[])：往数组里增加数据，返回新数组的长度
list.push({
title:title,
checked:true
})
- list.splice(startIndex,deleteCount)：从startIndex处删除，删除deleteCount个值
list.splice(key,1);
2、本地存储的增删改查
本地存储使用localStorage:
- localStorage.setItem(key,value)：根据key来设置value或添加新的
//通过JSON.stringify(value)将value转换为json数据
//通过JSON.parse(value)将json解析
localStorage.setItem(key,JSON.stringify(value));
- localStorage.getItem(key)：通过key获取value
- localStorage.removeItem(key)：通过key移除value
写在最后：
- 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
- 文章我也会根据所学到新的知识不断更新。
网友评论