react 使用中注意事项提要

1、尽可能的减少数组index作为key，数组中插入元素的等操作时，会使得效率底下；

2、如果在 JSX 中给元素添加类, 需要使用 className 代替 class；类似：label 的 for属性，使用htmlFor代替；

3、在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可；

4、在 JSX 中只能使用表达式，但是不能出现 语句！！！

5、在 JSX 中注释语法：{/* 中间是注释的内容 */}；

6、注意：事件名称采用驼峰命名法；

7、只能通过setState来设置受控组件的值

8、使用 JSX语法 创建组件，实现组件化开发，通过 diff算法 和 虚拟DOM 实现视图的高效更新；

• <Router></Router>：作为整个组件的根元素，是路由容器，只能有一个唯一的子元素
• <Link></Link>：类似于vue中的<router-link></router-link>标签，to 属性指定路由地址
• <Route></Route>：类似于vue中的<router-view></router-view>，指定路由内容（组件）展示位置

函数式组件 和 class 组件的使用场景说明：
1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state；

JavaScript函数创建

• 注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
• 注意：2 函数必须有返回值，返回值可以是：JSX对象或null
• 注意：3 返回的JSX，必须有一个根元素
• 注意：4 组件的返回值使用()包裹，避免换行问题；

state 用来给组件提供组件内部使用的数据

• 注意：只有通过class创建的组件才具有状态
• 注意：状态是私有的，完全由组件来控制;

• 注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！

  • 可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this

• 注意：不要在 render() 方法中调用 setState() 方法来修改state的值

  • 但是可以通过 this.state.name = 'rose' 方式设置state（不推荐!!!!）
  • 注意：使用 setState() 方法修改状态，状态改变后，React会重新渲染组件
  • 注意：不要直接修改state属性的值，这样不会重新渲染组件！！！

componentWillMount()：

• 说明：组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染
• 注意：无法获取页面中的DOM对象
• 注意：可以调用 setState() 方法来改变状态值；

组件通讯

• 父 -> 子：props
• 子 -> 父：父组件通过props传递回调函数给子组件，子组件调用函数将数据作为参数传递给父组件
• 兄弟组件：因为React是单向数据流，因此需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props
• React中的状态管理： flux（提出状态管理的思想） -> Redux -> mobx