React基础梳理

创建React（cli）脚手架

• npm i -g create-react-app
• 进入文件目录
• create-react-app 文件名 （创建模板）
• cd 文件名 （进入模板内）
• npm start （启动项目）

组件基础依赖

• import React from ‘react’; (提供jsx环境，并且提供组件对象供继承使用)
• import ReactDOM from ‘react-dom’; (用于将组件转化为DOM元素)

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {       //react组建都继承自React.Component
   constructor(props){    //构造器，组件初始化数据
     super(props);      //继承祖先的属性
     this.state={};       //存放数据
   }
}
ReactDOM.render(<App />, document.getElementById("app"));  //将组件渲染到DOM节点上

更新state数据

//第一种更新数据
this.state.text="xxx";
this.setState({});
//第二种更新数据
this.setState({text:"xxx"});

props-slot 组件数据传递：父=>子

• 父组件

getHeader=()=>{
	return (<div>这里是头部内容</div>);
}
//...此处省略
<Son title="这是一篇文章" header={this.getHeader}>   //第一种传递方式，通过属性，不限制数量
	<div>这是文章的内容</div>    //第二种slot方式，传递真实DOM节点
</Son>

• 子组件

{this.props.title}   //这是一篇文章   通过属性传递普通数据
{this.props.header() }  //<div>这里是头部内容</div>  通过属性传递真是DOM节点
{this.props.children}   //<div>这是文章的内容</div>  通过slot传递真是DOM节点，只有一个，如果有多个用js自己排序或者用属性来传递，再自己进行排序

限制props类型

import PropsTypes from 'prop-types';
static propTypes={
	title:PropsTypes.string.isResquired,   //限制必须传入一个字符串参数
	num:PropsTypes.number   //传入的参数必须为数字
}
static defaultProps={   //如果未传入参数，会有一个默认值
	num:"1"               
}

默认值不能与isRequired一起使用会报错的

• PropsTypes.string //字符串
• PropsTypes.number //数字
• PropsTypes.array //数组
• PropsTypes.object //对象
• PropsTypes.bool //布尔值
• PropsTypes.func //函数
• PropsTypes.element //真实的DOM节点
• PropsTypes.symbol

ES6中Symbol类型

Symbol 值通过Symbol函数生成。这就是说，对象的属性名可以有两种类型：一种是字符串，另一种是Symbol类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突

let firstName = Symbol();
let person = {};
person[firstName] = "huochai";
console.log(person[firstName]); // "huochai";

[注意]Symbol函数前不能使用new命令，否则会报错。因为生成的 Symbol 是一个原始类型的值，不是对象

Symbol函数接受一个可选参数，可以添加一段文本来描述即将创建的Symbol，这段描述不可用于属性访问，但是建议在每次创建Symbol时都添加这样一段描述，以便于阅读代码和调试Symbol程序

let firstName = Symbol("first name");
let person = {};
person[firstName] = "huochai";
console.log("first name" in person); // false
console.log(person[firstName]); // "huochai"
console.log(firstName); // "Symbol(first name)"

Symbol的描述被存储在内部[[Description]]属性中，只有当调用Symbol的toString()方法时才可以读取这个属性。在执行console.log()时隐式调用了firstName的toString()方法，所以它的描述会被打印到日志中，但不能直接在代码里访问[[Description]]

Symbol是原始值，ES6扩展了typeof操作符，返回"symbol"。所以可以用typeof来检测变量是否为symbol类型

let symbol = Symbol("test symbol");
console.log(typeof symbol); // "symbol"