环境
node npm
react 脚手架安装及使用
npm install -g create-react-app
create-react-app projectname
第一次新建项目会比较慢
Happy hacking
启动 npm start
http://localhost:3000/ 查看
第一次启动会比较慢
目录结构
registerServiceWorker 现在用不到删了
测试的js 不懂 删!!!
扫描二维码关注公众号,回复:
2790672 查看本文章
移动端快捷方式的图标了链接 !
入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
//import 引入组件
// import registerServiceWorker from './registerServiceWorker';
// pwa 移动端页面缓存
ReactDOM.render(<TodoList />, document.getElementById('root'));
//挂载组件
组件结构
组件定义必须以大写字母开头
constructor
constructor 优先级最高的
render
构建dom的结构
元素的class 与js 类 class 冲突 用className代替
label for 与循环for冲突 用htmlFor代替
数据绑定 用{this.state.value}
绑定事件都要指向组件本身 bind(this)
提升性能 在constructor 操作
class TodoList extends Component {
constructor (props) {
super(props);
this.state = {
inputValue: '<h1>123</h1>',
list: []
}
this.handleInputChange = this.handleInputChange.bind(this)
this.handleBtnClick = this.handleBtnClick.bind(this)
this.handleItemDelte = this.handleItemDelte.bind(this)
}
在render中尽量避免操作复杂的dom
循环也定义函数
constructor render 中this 指向组件本身
render return 必须以闭合的标签包裹住,不想在父及多一层标签 可以用react 组件Fragment
定义方法
直接在类中定义
这里函数内部的this都log出来都是undefined 这个指向 就很懵逼了
所以在constructor 用bind()改变this的指向
改变的数据
父子组件通信
父组件
<TodoItem
deltelItem= {this.handleItemDelte}
centent={item}
index={index}/>
子组件
<div onClick ={this.handleClick}>
{centent}
</div>
很简单。。。
因为react 是单向数据流 不支持子组件 直接修改父组件的数据
所以调用 父组件定义的方法 更改父组件的数据
子组件调用父组件的方法 bind后 this指向子组件不能直接用。。。