React学习

JSX注意点

1. CSS类名： className替代class
2. JSX只能使用表达式，不能使用if等语句
3. 类首字母大写

组件创建方式

1. 函数创建（无状态）

       function Compon(props){
           return ({
   
               <div>{props}</div>
   
           })
   
       }
   

2. ES6 class创建，此时可以使用state存储数据

   class Compon extends React.Component {
       constructor(){
   
       }   
   
       fn = () => {}
   
   }
   

父子组件通信

1. 通过props

   父传递给子组件props，子组件通过 this.props获取

   <Child title={data}>
   

2. 子---> 父
   通过事件传递，父组件传递给子组件一个函数，子组件通过
   this.props.event(data)返回给父组件

   父组件：
   <Child bindCilck={this.bindChange}>
   
   子组件：
   
   this.props.bindCilck(data)
   

   state

   给组件内部提供数据，通过setState({ data })进行修改,this.state.data进行数据访问，render中只读取state，不用来设置

组件生命周期

1. constructor()
   初始化数据，初始化state
2. componeWillMount()
   组件被挂载到页面之前调用，不会重复触发渲染，可以使用setState()
3. render()
   渲染组件到页面中,不要在render方法中调用 setState() 方法.
4. componentDidMount()
   组件已经挂载到页面中,可以使用DOM对象，可以使用setState()
5. componentWillReceiveProps()
   每当组件的props改变的时候，都会触发运行阶段的函数。
   可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变，可能会陷入无限循环
6. shouldComponentUpdate()
   根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染，返回值为Boolean
7. componentWillUpdate()
   组件将要更新
   ## 渲染问题
8. 在state中的数据，如果改变了，会立即渲染，前提使用正确修改state方式
9. setState是异步的，有个一个回调函数。

this绑定

最好是通过箭头函数，简单方便
fn = () => {}