react创建组件、jsx语法、绑定数据、本地存储-03

一、创建组件

在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

---

写在最后：

• 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
• 文章我也会根据所学到新的知识不断更新。