关于前端:工作学习总结1

3次阅读

共计 2338 个字符，预计需要花费 6 分钟才能阅读完成。

amis 是一个低代码前端框架，应用 json 配置页面，缩小页面的开发量。

通过 amis 提供的组件，能够疾速构建一个新的页面，像罕用的表格，表单，图表，搜寻等组件都有，根本满足开发。

然而在开发过程中发现，在应用 Wizard 向导，表单向导（步骤条），一步步疏导用户实现操作，但基于目前的 amis 的 Wizard 组件所提供的 api，满足不了可能屏蔽上一步、下一步按钮，目前的 api 能够批改按钮的文案，然而不能屏蔽上一步的操作，因而间接应用 amis 这个组件是不能满足以后的需要。

不过 amis 能够自定义组件，然而还不是那么相熟怎么应用，因而抉择间接用 react 来实现这个性能。而后去学习了下 react 和 antd，重点是看了步骤条（steps）和表格（table）的应用。

1. 构造函数（constructor）

增加一个 构造函数（constructor），而后在该函数里为 this.state 中赋值。

构造方法是用于构建和初始化与创建对象的非凡办法 class，一个类中只能有一个名为“constructor”的非凡办法。
构造函数能够应用 super 关键字来调用超类的构造函数。
传入 props 传递到父类的构造函数中（Class 组件应该始终应用 props 参数来调用父类的构造函数。）

constructor(props) {super(props);
    this.state = {num: 0}
}

2.react 的申明周期

componentWillMount() 在渲染前调用, 在客户端也在服务端
componentDidMount() 办法会在组件曾经被渲染到 DOM 中后运行
componentWillUpdate() 在组件接管到新的 props 或者 state 但还没有 render 时被调用。在初始化时不会被调用
componentDidUpdate() 在组件实现更新后立刻调用。在初始化时不会被调用
componentWillUnmount() 在组件从 DOM 中移除之前立即被调用

render 办法渲染视图，render 办法须要返回一个 jsx 元素

React.render 当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会应用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。

3. 遇到的问题

（1）table 表格有自带的分页性能，如果不配置 pagination 参数，则会应用本身的分页形式，然而如果设置每页展现 10 条数据，而后端有分页性能，因为 table 是依据条数进行分页的，因而申请到的数据只有 10 条则不会显示页码，这个可用于后端没有进行分页时应用，后端曾经分页后须要配置 pagination 分页参数。

（2）pagination 配置可间接在 table 组件配置，或者在 render 里进行配置

（3）react 内的点击事件，该办法须要绑定 this 指向，否则在办法内应用 setState 批改值会报错

<Button type="primary" onClick={() => this.next()}> 下一步 </Button>
<Button type="primary" onClick={this.next.bind(this)}> 下一步 </Button>

（4）vue 应用 v -for 循环数据，react 应用 foreach、map
vue 应用 v -if 判断条件，react 应用{isTrue && (<p></p>)}，或者三元运算符、if 语句

1、state 的更新可能是异步的

例如，上面的代码无奈更新 counter

this.setState({counter: this.state.counter + this.props.increment,});

解决这个问题，能够让 setState()接管一个函数而不是对象，用 state 作为第一个参数，props 作为第二个参数

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

2、map 遍历 & key

①通过组件模式
应用 {} 在 jsx 内构建元素汇合，通过 map 办法遍历数组，将数组中的每个元素变成 <li> 标签，将失去的数据复制给 listItem

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);

渲染到 DOM
ReactDOM.render(<ul>{listItems}</ul>,  document.getElementById('root')
);

②jsx 中嵌入 map()

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); 
 
 return (
    <ul>
        {listItems}
    </ul>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
        {numbers.map((number) => 
        <ListItem key={number.toString()} value={number} /> )} 
    </ul>
  );
}

③key 惟一地标识

在应用 map 遍历数据时，须要给组件设置 key，且是惟一的。
通常是选用 id 作为标识，如果没有 id 则能够应用 index，然而如果数据产生了变动，也会影响其性能，最好有个惟一的标识。

正文完