工作+学习总结(1)

羽玉

一、react + amis项目

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语句

二、补充react知识点(基本概念)

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,但是如果数据发生了变动,也会影响其功能,最好有个唯一的标识。

阅读 88
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏