React的入门学习
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
怎么写一个React类组件
- 定义一个
React.component的子类 - ui的dom结构就是
render函数的返回值 - props是传给组件的属性集合
class ShoppingList extends React.component{ render(){ return ( <div>{{this.props.name}}</div> ) } } // 用法示例 <shoppingList name="Huahua"/>
render 返回了一个 React 元素（本质上就是一个对象），这是一种对渲染内容的轻量级描述。
实际内部将其转化成：
React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) )
在 React 应用中，数据通过 props 的传递，从父组件流向子组件。
注意{}外面是没有引号的，表示这段代码是js代码。
事件的时候，如果写在dom上，可以用箭头函数规避this的问题。
阻止组件渲染的话，可以return null
怎么写一个函数组件
当组件里，只有render方法的时候，就该换成函数组件啦！ 换言之，函数组件没有自己的state! 函数组件不需要继承React.component类！
其实就是写一个普通函数，然后返回React元素即可~~
如果需要props的话，就传一个props!
注意事件的写法发生了变化！
注意事件的写法发生了变化！
注意事件的写法发生了变化！
把原先子类的onClick={() => this.props.onClick()}改成了更短的 onClick={props.onClick}!
function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} </button> ); }
只有两种值的时候，可以考虑布尔值。
React元素是不可变对象
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI
想要更新的话，就是重新创建。
但注意，React元素重新创建，不代表真实的DOM重建，React是根据之前的区别，而对DOM进行必要的更新，并不是新建
怎么给组件加私有属性state
- 组件类里面，写个constructor，定义state
- 为了方便使用props，这边也将props传过来
class Square extends React.Component { construtor(props){ super(props) this.state = { value:null } } render() { return ( <button className="square" onClick={()=>{this.setState({value:'X'})}> {this.state.value} </button> ); } }
怎么修改私有属性state
- setState的方法
this.setState({value:'x'})
State 的更新可能是异步的！！！
出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。
如果需要使用到上一次的state
this.setState((state, props) => ({ counter: state.counter + props.increment }));
怎么将子组件的state提升为父组件的
遇到下面的情况，就要提升state：
- 同时获取多个子组件数据
- 两个组件之间需要相互通讯
需要把子组件的 state 数据提升至其共同的父组件当中保存。
之后父组件可以通过 props 将状态数据传递到子组件当中。
这样应用当中所有组件的状态数据就能够更方便地同步共享了。
怎么写事件
- react的事件命名都是小驼峰
- html元素，一般就是onClick之类
- react组件，可以用自定义的事件
- 如果是React类定义的组件，注意大括号里，使用箭头函数
- 如果是函数组件，注意不用箭头函数
// react类定义的组件的话 <button onClick={(e)=>this.props.onClick(e)}}> <Square value={this.state.squares[i]} onClick={(e)=>this.handleClick(i,e)}/>; // 函数组件的话 <button onClick={props.onClick}>
怎么让子组件修改父组件的私有属性state
- 子组件内部，事件绑定的时候，让
this.props.xx[event]执行 - 父组件给子组件传相应事件，这个事件绑定的函数里是修改逻辑，因为写在父组件里，所以容易修改
// 父组件里 <Square value={this.state.squares[i]} onClick={()=>this.handleClick(i)}/>; handleClick(i){ const squares = this.state.squares.slice() squares[i] = 'X' this.setState({squares}) } // 子组件里 <button onClick={()=>this.props.onClick()}}></button>
注意修改属性的时候，不要动原始的数组，而是要复制一份出来，在修改。
数据不可变的好处：
- 简化复杂的功能，比如撤销和恢复的功能
- 跟踪数据的改变。如果直接修改数据则需要和之前的版本比较，但跟踪不可变数据的话，发现对象变成一个新对象的话，就说对象发生了改变
- 确定React中何时重新渲染。不可变性最主要的优势在于它可以帮助我们在 React 中创建 pure components。我们可以很轻松的确定不可变数据是否发生了改变，从而确定何时对组件进行重新渲染。
列表渲染：map
一般通过某数据列表生成元素的时候，会使用map。 而且，一般提前通过变量得到，。
const history = this.state.history.map((item,index)=>{ const desc = index === 0?'Go to game start':`Go to move #${index+1}`; return ( <li key={index}>{desc}</li> ) }) render(){ return ( <ol>{history}</ol> ) }
动态列表，要指定key
每当一个列表重新渲染时，React 会根据每一项列表元素的 key 来检索上一次渲染时与每个 key 所匹配的列表项。
- 如果 React 发现当前的列表有一个之前不存在的 key，那么就会创建出一个新的组件。
- 如果 React 发现和之前对比少了一个 key，那么就会销毁之前对应的组件。
- 如果一个组件的 key 发生了变化，这个组件会被销毁，然后使用新的 state 重新创建一份。
key 是 React 中一个特殊的保留属性（还有一个是 ref，拥有更高级的特性）。
当 React 元素被创建出来的时候，React 会提取出 key 属性，然后把 key 直接存储在返回的元素上。
虽然 key 看起来好像是 props 中的一个，但是不能通过 this.props.key 来获取 key。 React 会通过 key 来自动判断哪些组件需要更新。组件是不能访问到它的 key 的。
如果你没有指定任何 key，React 会发出警告，并且会把数组的索引当作默认的 key。但是如果想要对列表进行重新排序、新增、删除操作时，把数组索引作为 key 是有问题的。
组件的 key 值并不需要在全局都保证唯一，只需要在当前的同一级元素之间保证唯一即可。
静态列表是可以将索引作为key的
其他
- 开发者工具查看react元素：chrome浏览器的插件
React Devtools - 组件的生命周期：componentDidMount是组件第一次被渲染到 DOM 中的时候，componentWillUnmount是当 DOM 中组件被删除的时候
- 怎么不改变原数组的情况下，复制数组和给数组添加元素：
slice()和arr.concat(item) - 某数据存在的话，才渲染元素：&&运算符：
{count && <h1>{count}</h1>} - 特殊的属性：JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。key和ref是保留属性。
- 包含验证、追踪访问字段以及处理表单提交的解决方案，可以尝试formilk
