react总结笔记

前端框架———react

一直都在用react，之前也有总结过一些东西，但都比较粗略！现在总结一些之前拉掉的东西，顺带自己也复习一下基础内容~前面写过的大家也可以参考一下，有什么不足或补充私信或评论区交流，共同学习
react官方文档
生命周期
hooks
react简版

React起源于Facebook的内部项目，于2013年5月开源，主要用于构建UI，前端三大框架之一。

• 特点：
  声明式设计、高效（虚拟dom，极大减少了dom交互）、灵活（可以与三方库很好的结合开发）、JSX（是JavaScript的扩展）、组件（构建组件提升代码的复用）、单向数据流
• 创建新项目
  使用 create-react-app 快速构建 React 项目
  create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
  create-react-app 自动创建的项目是基于 Webpack + ES6 。
  执行以下命令创建项目：
  $ cnpm install -g create-react-app
  $ create-react-app my-app(项目名称)
  $ cd my-app
  $ npm start
  正常情况下默认的端口为localhost:3000

ReactDOM.render(…) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制，他有两个参数，内容和渲染目标 js 对象。
内容就是要在渲染目标中显示的东西，可以是一个 React 部件，也可以是一段HTML或TEXT文本。渲染目标JS对象，就是一个DIV或TABEL,或TD 等HTML的节点对象。

ReactDOM.render(<App />, div);

常规项目根文件下index.js即如图所示：

unmountComponentAtNode() 这个方法是解除渲染挂载，作用和 render 刚好相反，也就清空一个渲染目标中的 React 部件或 html 内容。

ReactDOM.unmountComponentAtNode(div);

• React 只会更新必要的部分
  值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

React 使用 JSX 来替代常规的 JavaScript，JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。
元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个根 div 元素包裹它，添加自定义属性需要使用 data- 前缀
表达式写在花括号 {} 中

<h1>{i == 1 ? 'True!' : 'False'}</h1>

页面标签写style样式不需要带单位px，React 会在指定元素数字后自动添加 px ，注释需要写在花括号中

{/*注释...*/}

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
  <h1>工作是为生存</h1>,
  <h2>生活是生存的艺术！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

react中有两种组件函数组件和类组件，他们想各自组件传参分别使用props和this.props，函数组件要在形参位置加props

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

引申：
组件中也可以套用组件，那么最外层的参数要传到里面去就需要一层层的props来传参，形成嵌套地狱，所以为了避免这个问题，我们可以借助store仓库+provider(提供者)高阶组件，由于react是单向数据流所以子组件无法直接给父组件传参，只能通过回调函数来处理

• State

React 把组件看成是一个状态机,通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。只能使用this.setState({})方法来更改state的值。每个组件内部的状态外部不可访问，所以可以在同一个页面多处调用一个组件，各自内部的状态互不影响

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

• props
  state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
  默认props，可以通过组件类的 defaultProps 属性为 props 设置默认值，实例如下：

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

• Props 验证

React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：

var title = "你好，世界";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string
  //title: PropTypes.string.isRequired, // isRequired表示必传
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多类型校验：

MyComponent.propTypes = {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

在react开发过程中列表的渲染最常使用的是map()方法，但要注意两点：
组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key，Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的 id 作为元素的 key:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key：

const todoItems = todos.map((todo, index) =>
  // 只有在没有确定的 id 时使用
  <li key={index}>
    {todo.text}
  </li>
);

如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。
元素的 key 只有在它和它的兄弟节点对比时才有意义。
比方说，如果你提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 元素上，而不是放在 ListItem 组件中的

• 元素上。
  数组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键。
  key 会作为给 React 的提示，但不会传递给你的组件。如果您的组件中需要使用和 key 相同的值，请将其作为属性传递：

• const content = posts.map((post) =>
    <Post
      key={post.id}
      id={post.id}
      title={post.title} />
  );
  

  还要一些不常用的组件API(本人在开发过程中基本没用到)

  替换状态：replaceState
  设置属性：setProps
  替换属性：replaceProps
  强制更新：forceUpdate
  获取DOM节点：findDOMNode
  判断组件挂载状态：isMounted
  

  最最常用的就是setState，他有两个参数：
  nextState，将要设置的新状态，该状态会和当前的state合并
  callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
  合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

  两个生成组件文件的快捷键

  函数组件 => rfc
  类组件 => rcc