从0学习React（9）

代码解析

const changeOrg = (orgId) => {
  queryData.orgId = orgId;
  delete queryData.deviceClassifyId;
  setQueryData(queryData);
  actionRef.current?.reset();
  loadTreeData(orgId);
};

1. const changeOrg = (orgId) => { ... };

• 这是一个箭头函数（arrow function）的声明。
• changeOrg 是函数的名称。
• orgId 是函数的参数，表示新的组织机构 ID。

2. queryData.orgId = orgId;

• 直接修改 queryData 对象的 orgId 属性，将其设置为新的 orgId。

3. delete queryData.deviceClassifyId;

• 使用 delete 运算符删除 queryData 对象的 deviceClassifyId 属性。

4. setQueryData(queryData);

• 调用 setQueryData 函数，将更新后的 queryData 对象传递给它。
• 假设 setQueryData 是一个用于更新查询参数的状态更新函数。

5. actionRef.current?.reset();

• 使用可选链（optional chaining）运算符 ?. 来安全地访问 actionRef.current 对象的 reset 方法。
• 如果 actionRef.current 存在，则调用其 reset 方法。

6. loadTreeData(orgId);

• 调用 loadTreeData 函数，并传入新的 orgId 作为参数。
• 假设 loadTreeData 是一个用于加载树形结构数据的函数。

使用的语法和概念

1. 箭头函数（Arrow Function）

• 箭头函数是一种简洁的函数定义方式，语法为 const functionName = (params) => { ... };。

• 在箭头函数中，this 关键字的行为与普通函数不同，它不会绑定自己的 this，而是继承自外层作用域。

  const changeOrg = (orgId) => { ... };

2. 对象属性赋值（Object Property Assignment）

• 直接修改对象的属性值。

  queryData.orgId = orgId;

3. 删除对象属性（Delete Property）

• 使用 delete 运算符删除对象的属性。

  delete queryData.deviceClassifyId;

4. 状态更新函数（State Update Function）

• setQueryData 假设是 React 的状态更新函数，用于更新组件的状态。

  setQueryData(queryData);

5. 可选链（Optional Chaining）

• 可选链运算符 ?. 用于安全地访问对象的属性或方法，如果对象不存在则返回 undefined。

  actionRef.current?.reset();

6. 函数调用（Function Call）

• 调用另一个函数，并传递参数。

  loadTreeData(orgId);