react学习笔记-介绍（1）

react由FaceBook推出，2013年开源的，函数式编程思想，使用人数最多的前端框架，健全的文档及完善的社区

2-2、安装

npm install -g create-react-app 安装脚手架
create-react-app todolist 创建项目
cd todolist
npm start
npm add axios // ajax请求插件

2-3、工程目录文件简介

// index.js
// PWA https协议的服务器，用户第一次访问后，会缓存内容，即使断网进到页面会展示之前缓存的内容
import * as serviceWorker from './serviceWorker';
serviceWorker.unregister();

// public/manifest.json
// 将项目打包成桌面应用的配置

{
  "short_name": "React App", // 快捷方式名称
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico", // 快捷方式图标
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".", // 跳转网址
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

2-4、JSX语法

// react 版本更新时组件格式变化
//react 16.8.6
import React from 'react'; // 引入React目的是可以运用jsx语法，即下方标签写法

function App() {
  // JSX
  return (
    <div className="App">
      hello world
    </div>
  );
}

//react 16.6.3
// import React,{Component} from 'react'
// import {Component} from 'react'
// 相当于
// import React from 'react'
// const Component = React.Componnet
// class App extends Component {
//   render (){
//     return (
//       <div className="App">
//         hello world
//       </div>
//     );
//   }
// }

export default App;

3-1、todolist

import React,{Fragment} from 'react'
Fragment占位符，可包裹整个jsx语句

3-2、React中响应式设计思想和事件绑定

<input
     onChange={this.handleInputChange.bind(this)}
/>
handleChange(key,e){
  console.log(e.target.value,key)
    this.setState({
      [key]: e.target.value
      // inputValue: e.target.value
    })
}
<input
    onChange={(e)=>this.handleChange('inputValue',e)}
     onChange={(e)=>this.handleChange(val,'title')}
/>

JSX中注释写法
{ /* 这是jsx语法注释 */ }或
{
//这是jsx单行注释
}

3-4、JSX语法细节补充

// 对标签不转义
dangerouslySetInnerHTML={{__html:item}} 
// 点击输入框前label，自动光标聚焦
<label htmlFor="insertArea">输入内容</label>
<input
      id="insertArea"
 />

3-5、拆分组件与组件之间的传值

// 父组件
<TodoItem
  content={item}
  index={index}
  itemDelete={this.handleItemDelete}
/>
//子组件
render(){
    const {content} = this.props
    return (
      <div>
        {content}
      </div>
    )
  }

3-7、围绕React衍生的思考

声明式开发
可以与其它框架并存
组件化
单向数据流（父组件给子组件传值，子组件只能使用，只能通过父组件的方法操作数据）
视图层框架（复杂的需要靠redux之类辅助）
函数式编程（维护方便，前端自动化测试更加便利）