React进阶指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Mweb_demo/article/details/100521302

组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如:
<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
将函数组件转换成 class 组件

建一个同名的 ES6 class，并且继承于 React.Component。
添加一个空的 render() 方法。
将函数体移动到 render() 方法之中。
在 render() 方法中使用 this.props 替换 props。
删除剩余的空函数声明。

正确地使用State

不要直接修改 State，代码不会重新渲染组件
State 的更新可能是异步的，出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以不要依赖他们的值来更新下一个状态。可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数。

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
=============================================
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

State 的更新会被合并，这里的合并是浅合并。
数据是向下流动的。react中的state,都点类似于vue中data。都是在本组件内生效，可任意修改。react中props和vue中的props也是类似的，都是数据流，从父组件传递到子组件。也就是数据是向下流动的。

事件处理

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
在 React 中不能通过返回 false 的方式阻止默认行为。必须显式的使用 preventDefault 。

Props 和组合提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数
如果想要在组件间复用非 UI 的功能，建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。

React开发注意点