React 基础语法

首先进行react安装，使用官方脚手架工具

npm i create-react-app
create-react-app my-app
cd my-app
npm start

Hello World

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX语法

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 this指向

　　改变this的指向

<input 
　　onChange={this.handleInputChange.bind(this)}
　　value={this.state.inputValue} />

数组遍历

<ul>
　　{
　　　　this.state.list.map((item,index)=>{
　　　　　　return <li key={index}>{item}</li>
　　　　})
　　}
</ul>

注释

{/*多行注释*/}
{
　　//单行注释
}

class->使用className

for->使用htmlFor

HTML字符串解析成html　

　　dangerouslySetInnerHTML={{__html:item}}

ref

ref={`listGroup${index}`} 

this.refs[`listGroup${index}`]

组件传值

　　父组件通过属性传递子组件，子组件通过props接受父组件的值

　　子组件通过方法改变父组件的数据

<TodoItem
　　content={item}
　　index={index}
　　deleteItem={this.handleItemDelete.bind(this)}
　　key={index} />

<li onClick={this.handleClick.bind(this)}>{this.props.content}</li>

handleClick(){
　　this.props.deleteItem(this.props.index)
}

setState

　　第一种 对象的方式传入setState来更新state，等同于 Object.assign({},  this.state,  {inputValue:e.target.value}) 

this.setState({
　　inputValue: e.target.value
})

　　第二种 函数的方式传入setState来更新state 是一个异步的过程，可以正确的获得state的值

this.setState(prevState=>({
　　list:[...prevState.list, prevState.inputValue],
　　inputValue:''
}))

　　处理异步过程时，推荐使用函数的方式更新state的值，这样会正确获得state的值

　　但是有时候我们需要处理同步获得state的值，我们可以把setState改造成Promise

return new Promise(resolve => {
  this.setState({
    listHeight
  }, resolve)
})

开发工具

　　react-developer-tools

PropTypes和defaultProps

TodoItem.propTypes = {
  content: PropTypes.string,
  index: PropTypes.number.isRequired,
  deleteItem: PropTypes.func
}
TodoItem.defaultProps = {
  test:'hello world'
}

state，props，render关系

　　当state，props数据发生变化是，render函数都会重新执行

　　当父组件的render函数被调用时，子组件的render也将会重新调用

虚拟DOM

　　state,props+JSX -> js对象（虚拟DOM）createElement-> 真实的DOM -> state,props+JSX发生变化 -> 新js对象与旧js对象比较 -> 渲染新的DOM

　　使用javascript对象结构表示DOM树的结构

　　当状态发生改变时，会新建一个新的DOM树，与之前的DOM树比较，然后把差异部分渲染到真实的DOM树

　　虚拟DOM实质是js和dom之间做了一个缓冲

　　优点：

　　　　性能提升

　　　　可以跨端应用React Native

diff算法

　　多次setState的变化结合成一次setState的变化与虚拟DOM比较，减少比较次数

　　对操作前后的DOM树的同一层节点进行比较，一层一层对比，时间复杂度O(n)。如果出现差异则替换提高性能

　　遍历时候保持key值不变，提高虚拟DOM渲染

生命周期　　

　　生命周期函数即在组件某个时候会自动执行

　　页面初始化 props  state

　　组件挂载 componentWillMount -> render -> componentDidMount    只在组件第一次挂载的时候执行

　　组件更新 state发生变化 ->                                                    shouldComponentUpdate  （返回布尔类型 true ）->  componentWillUpdate -> render -> componentDidUpdate

　　　　　　props发生变化 -> componentDillReceiveProps  1、一个组件从父组件接受参数。2、如果组件第一次存在父组件中，那么不会执行。3、如果这个组件之前已经存在父组件中，才会执行 ->

　　　　　　　　　　　　　　　　　　　　　　　　　　　　 shouldComponentUpdate  （返回布尔类型 true ）->  componentWillUpdate -> render -> componentDidUpdate

　　组件卸载 componentWillUnmount

       应用

　　　　shouldComponentUpdate  性能优化

　　　　componentDidMount   ajax请求

动画

　　CSS过渡动画 transform

　　CSS动画效果  animation

　　react-transform-group 

　　　　CSSTransition

　　　　　　in

　　　　　　timeout