起步

1. 创建项目:npx create-react-appmy-app
2. 打开项目: cd my-app
3. 启动项目:npm start
4. 暴露配置项:npm run eject

React和ReactDom

删除src下⾯面所有代码，新建index.js。

import React from 'react';
import ReactDOM from 'react-dom';
// 这里怎么没有出现React字眼?
// JSX => React.createElement(...)
ReactDOM.render(<h1>Hello React</h1>, document.querySelector('#root'));

React负责逻辑控制，数据 -> VDOM ReactDom渲染实际DOM，VDOM -> DOM React使⽤JSX来描述UI
babel-loader把JSX 编译成相应的 JS 对象，React.createElement再把这个JS对象构造成React需 要的虚拟dom。

JSX

JSX是⼀一种JavaScript的语法扩展，其格式⽐比较像模版语言，但事实上完全是在JavaScript内部实现的。 JSX可以很好地描述UI，能够有效提⾼高开发效率，体验JSX。
基本使⽤用
表达式{}的使⽤用，index.js

const name = "react study";
const jsx = <div>hello, {name}</div>;

函数

函数也是合法表达式，index.js

const obj = {
  fistName: "Harry",
  lastName: "Potter"
};
function formatName(name) {
  return name.fistName + " " + name.lastName;
}
const jsx = <div>{formatName(user)}</div>;

对象

jsx是js对象，也是合法表达式，index.js

 const greet = <div>good</div>;
const jsx = <div>{greet}</div>;

条件语句

条件语句可以基于上面结论实现，index.js

const show = true;//false;
const greet = <div>good</div>;
const jsx = (
<div>
{/* 条件语句 */}
{show ? greet : "登录"} {show && greet}
</div>
);

数组

数组会被作为⼀一组⼦元素对待，数组中存放⼀一组jsx可用于显示列列表数据

const a = [0, 1, 2];
const jsx = (
<div>
{/* 数组 */} <ul>
{/* diff时候，⾸首先⽐比较type，然后是key，所以同级同类型元素，key值必须得 唯⼀一 */} {a.map(item => (
        <li key={item}>{item}</li>
      ))}
</ul> </div>
);

属性的使⽤

import logo from "./logo.svg";
const jsx = (
  <div>
{/* 属性:静态值用双引号，动态值用花括号;class、for等要特殊处理。 */}
    <img src={logo} style={{ width: 100 }} className="img" />
  </div>
);

模块化

css模块化，创建index.module.css，index.js

 import style from "./index.module.css";
<img className={style.logo} />

正确使用setState

setState(partialState, callback)

1. partialState:object|function ⽤
   用于产生与当前state合并的⼦子集。
2. callback:function state更新之后被调⽤。

关于 setState() 你应该了了解三件事:

不要直接修改 State 例如，此代码不会重新渲染组件:

 // 错误示范
this.state.comment = 'Hello';
 // 正确使⽤
this.setState({comment: 'Hello'});

State 的更新可能是异步的

以下方式为同步

//1. 在回调中获取状态值
 
changeValue = v => {
  this.setState(
    {
      counter: this.state.counter + v
},
() => {
      console.log("counter", this.state.counter);
    }
); };
 //2. 使用定时器器:
//3. 原⽣事件中修改状态
总结: setState只有在合成事件和生命周期函数中是异步的，在原⽣生事件和setTimeout中都是同步 的，这里的异步其实是批量更新。
State 的更新会被合并
 
setTimeout(() => {
  this.setCounter();
}, 0);
 
componentDidMount(){
  document.body.addEventListener('click',     this.changeValue, false)

State 的更新会被合并

\\如果想要链式更新state:
 
changeValue = v => {
    this.setState(state => ({ counter: state.counter + v }));
};
setCounter = () => {
    this.changeValue(1);
    this.changeValue(2);
};