未完善
环境要求
1. npm install -g create-react-app
2. create-react-app my-app
3. npm install --save react-router
// 安装的时候最好使用yarn,使用npm安装不上路由,有node版本警告
yarn intall
// 注意不是react-router,这个很少用
// yarn add react-router
yarn add react-router-dom
文件结构
public静态资源文件夹
mainifest.json应用加壳,快应用,pwa,配置app的名字,图标,权限索取等信息
jsx语法规则
- 定义虚拟dom时不要写引号
const vdom=<h1>虚拟dom</h1>; //正确
const vdom2='<h1>虚拟dom</h1>'; // 错误
-
标签中混入js表达式时要用=={ }==包裹
-
样式的类名指定不要用class,要用className
-
内联样式要用
style={ {key:value}}
的形式去写 -
只有一个根标签
-
标签必须闭合
react中如果标签首字母大写表示组件,首字母小写表示普通的html标签
关于组件
react组件有两种形式,一是函数式组件,适用于简单组件,二是类式组件(class),适用于复杂组件,react组件有三大属性state
、props
、refs
,还有context
也重要
函数式组件定义
function FunComp(){
retrun <div>这里定义的是函数式组件</div>;
}
类式组件,类式组件需要继承React.Component
class ClassComponent extends React.Component{
render(){
return <div>这里定义的是类式组件</div>;
}
}
state
state目前来看相当于angular中的变量集合,主要采用对象方式存储,要更改state中值,必须使用setState({要修改的变量:新的变量值})方法,每一次调用setState就触发一次render
class ClassComponent extends React.Component{
constructor(props){
super(props);
this.state={
filed:'变量值1'};
}
render(){
return <div>这里定义的是类式组件</div>;
}
}
点击事件与this问题
react点击事件与原生dom事件名称基本一致,但是名称是小驼峰方式
class ClassComponent extends React.Component{
// 类中this的指向
// 正常情况下类中的this指向的是类的实例对象
// 而onClick={this.test}这个方式其实是将test函数赋值给onClick
// 在点击的时候其实是直接调用了test方法,而不是一个实例对象调用test方法
// const p=new Person();
// p.test();this-->Person
// const a=p.test;
// a.test();this-->undefined
constructor(props){
super(props);
this.state={
filed:'变量值1'};
// 如果不写这句,调用时候test中的this是undefined
this.test=this.test.bind(this);
}
render(){
// 注意,不能是onClick="test()",需要的是表达式,不能是字符串
// 也不能是onClick={test()},这样写方法会被立即调用
// onClick={this.test},这样写方法中的this是undefined
return <div onClick={
this.test}>这里定义的是类式组件</div>;
}
test(){
consnle.log('点击了',this.state.filed);
}
}
以上是为了证明this相关的知识,以下是实际使用
class ClassComponent extends React.Component{
// 直接这里写相当于直接在这个类上面添加成员,等于在构造器中赋值
state={
filed:'变量值1'};
render(){
return <div onClick={
this.test}>这里定义的是类式组件</div>;
}
// 这里使用的箭头函数,由于箭头函数自身没有this,会向外部寻找this
test=()=>{
consnle.log('点击了',this.state.filed);
}
}
props
props用来接收传入组件内部的值,可以限制类型以及设置默认值,props既可以在类组件中使用,也可以在函数式组件中使用
- 类式组件中使用props
class ClassComponent extends React.Component{
// 对标签属性进行类型、非必要性的限制
static propTypes={
// 限制filed类型为string同时是必传属性
// 关于PropTypes是15.5之后的东西,之前版本是React.PropTypes
// 直接使用PropTypes要引入需要相应的包
filed:PropTypes.string.isRequired
};
// 设置默认值
static defaultProps={
filed:'我是默认值'
};
render(){
return <div>这里定义的是类式组件</div>;
}
}
- 函数式组件中
function FunComp(props){
const {
filed1,filed2}=props;
return(
<div>{
字段1的值:filed1}</div>
);
}
// 函数式组件对props的限制形式
FunComp.propTypes={
filed:PropTypes.string.isRequired
};
FunComp.defaultProps={
filed:'我是默认值'
};
关于constructor
官网对于构造器有这么两句话,构造函数仅用于以下两种情况
通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例
class ClassComponent extends React.Component{
constructor(props){
// 这里的props不一定要接,但是如果要使用this.props,
// 必须接收props并传入super,否则拿到的会是undefined
super(props);
this.state={
filed:'变量值1'};
this.test=this.test.bind(this);
}
render(){
return <div>这里定义的是类式组件</div>;
}
}
refs
ref
相当于angular中的模板引用变量#demo
字符串形式的ref
class ClassComponent extends React.Component{
test1