React博客学习笔记

React博客学习笔记

• 

  如果你遇到以下情况，建议使用 getPopupContainer：
  下拉菜单被截断或无法完整显示
  使用了 CSS transform, filter, clip-path 等影响定位的属性
  使用了 position: fixed 或响应式布局，需要控制层级关系

• 感受一下箭头函数

  // 你招聘了一个服务员
  const 服务员 = (顾客说的话) => {
    // 服务员的工作是：把顾客说的话记下来
    this.setState({ 今天的订单: 顾客说的话 });
  };
  
  // 当服务员工作时的样子：
  服务员("我要一份红烧肉"); // 服务员收到"我要一份红烧肉"这句话

  相对于Java那边来说，就是在把括号这部分的参数夹在一个箭头里面
  有种简化写法就是把方法名加上箭头函数的尾巴去掉

三种绑定方式

---

方法	作用	传参方式	调用方式
call	单次绑定 this 并执行	第一个参数是 this，后续参数逐个传入	直接调用（立即执行）
apply	单次绑定 this 并执行	第一个参数是 this，第二个参数是数组（批量传参）	直接调用（立即执行）
bind	永久绑定 this	第一个参数是 this，后续参数可预设（柯里化）	返回新函数（需手动调用）

核心实现: 用bind永久绑定this

var lisi = { names: 'lisi' };
var zs = { names: 'zhangsan' };

function f(age) {
  console.log(this.names); // 固定指向 zs 的 names
  console.log(age);
}

// 关键：用 bind 创建新函数，this 永久绑定到 zs
var fBindZs = f.bind(zs); 

// 后续调用新函数，无需再传对象，this 始终是 zs
fBindZs(32); // 输出：zhangsan  32
fBindZs(40); // 输出：zhangsan  40

// 即使尝试用 call/apply 改变 this，也无效（绑定已固定）
fBindZs.call(lisi, 25); // 仍输出：zhangsan  25

---

绑定 + 预设参数（bind 的额外用途）

// bind的语法：
function.bind(thisArg, arg1, arg2, ...)

// 例子1：只有一个参数的情况
function f(age) {
  console.log(age);
}

var fBind = f.bind(null, 28);
fBind(35); // 输出28，不是35！35被完全忽略了

// 例子2：多个参数的情况  
function f(age, height) {
  console.log(age, height);
}

var fBind = f.bind(null, 28);
fBind(35);     // 输出：28 35（28是bind预设，35是新传的）
fBind(35, 180); // 输出：28 35（28是bind预设，35是新传的，180被忽略）

总结

• bind预设的参数永远不会被覆盖
• 后续传递的参数是用来补充额外的参数的，不是用来覆盖的
• 如果函数参数个数小于bind预设+新传参数总数，超出的参数会被忽略

记住：bind的参数预设是永久性的！

• 注意的是在 render() 方法中，需要使用 this.props 替换 props：

super (props) 的作用
如果写了构造函数，**必须第一行调用 super(props)**：

• super() 是 ES6 类继承中调用父类（React.Component）构造函数的语法；
• 加 props 参数是为了让构造函数内也能访问 this.props（如果不加，构造函数内 this.props 是 undefined，但 render 里仍能访问）。