学习react第一天的总结笔记

178 阅读2分钟

##JSX

  1. JSXjs语法拓展。
  2. JSX/JSX属性中嵌入表达式 使用{}包裹起来。
  3. React DOM在渲染所有输入内容之前,默认会进行转义,防止xss攻击。
  4. JSX中当一个标签里面没有内容,可以使用/>闭合标签。
  5. JSX会被babel编译为React.createElement(标签名,属性对象,节点内容)函数调用。

##元素渲染

  1. 通过这种方式将元素渲染为DOMReactDOM.render(JSX,根节点);
  2. React元素被创建后无法被改变,如想更新只能重新渲染。
  3. React只更新变化的部分。

##组件

  1. 定义组件的两种方式函数组件/类组件
  2. 可以通过组件属性传入参数,函数组件通过函数参数接收props,类组件通过constructor参数接收props
  3. 组件可以嵌套。
  4. props是只读的。

##生命周期

  1. 挂载 mount componentDidMount
  2. 卸载 unmount componentWillUnMount

##state

  1. 通过super继承到父类的构造函数,通过调用setState来修改state组件会自动重新渲染。
  2. state的更新可能是异步的,所以在setState中使用state中的值进行计算可能导致一些问题,针对这个问题可以在setState中传入一个函数参数分别为:上一个state 和 此次被更新应用时的props。
  3. setState中传入的对象会被合并到state中。
  4. state是局部的,所有组件都无法知道其他组件是否有状态,组件可以把state作为props向下传递到子组件中,但子组件并不能判断出props是否来自父组件的state。

##事件处理

  1. react中的事件使用小驼峰的命名方式(camelCase)。
  2. react中的事件不能通过返回false阻止默认行为,必须使用preventDefault
  3. react中的事件在JSX语法中需要传入一个函数而不是字符串。
  4. 为了在回调中可以使用this必须在初始化时.bind(this)
  5. 如需要向回调中传递额外的参数可以使用箭头函数,或者bind(this,id)

条件渲染

  1. 可以使用变量储存元素,例子:render(){ let flag = true; let button = <a>click</a>; return ( <div> {flag?button:""} </div> ); }
  2. JSX中可以使用短路代理三元运算符 例子:flag && <h1>aaa</h1>
  3. render方法返回null则不会渲染。

##列表

  1. 一般使用map生成组件列表。
  2. 列表的每一项应该有唯一的key
  3. key在兄弟节点之间必须唯一,不必是全局唯一的。
  4. props中无法拿到key属性。

##表单

  1. 非受控组件:不走state直接从组件中获取值。
  2. 受控组件:将值保存在state中,集中管理,类似于双向绑定。
    1. 使用函数柯里化将不同的元素值统一处理保存