react 渐学

环境
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指向子组件不能直接用。。。