一、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作为第二个参数

// Correctthis.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>);渲染到DOMReactDOM.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，然而如果数据产生了变动，也会影响其性能，最好有个惟一的标识。