创建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"