10章-SpringBoot 3 + Flutter3 实战低代码运营管理
地址1：https://pan.baidu.com/s/1Uay0bc6ghAVf401t-OdXiQ 提取码：sqcs
地址2：https://pan.baidu.com/s/1l3kJpBzm9tw0xbTC2BVbew 提取码：2law
1、什么是低代码
低代码（Low Code）是一种可视化的应用开发方法，用较少的代码、以较快的速度来交付应用程序，将程序员不想开发的代码做到自动化，称之为低代码。Gartner随后又提出了aPaaS和iPaaS的概念，其中aPaaS概念和低代码非常吻合。随着这一概念的不断推广，全球市场上都涌现出了很多低代码平台。
2、低代码起源
Gartner随后又提出了aPaaS和iPaaS的概念，其中aPaaS概念和低代码非常吻合。随着这一概念的不断推广，全球市场上都涌现出了很多低代码平台。
3、传递到React.Component的范型类型
接下来，我们把这两个接口都传递到React.Component的范型类型中，React.Component<Props, State>
下一步，组件需要初始化state的定义，这就需要我们给组件配置构建函数，constructor。 constructor需要传递props作为参数，而参数的类型应该是我们提前定义好的的props接口。紧接着，我们使用supper关键词来调用React.Component基础类的构建函数，同时把props也一起传递进去。然后，初始化组件状态，通过this关键词访问state，购物车下拉菜单状态isOpen 初始化为false，也就是先隐藏起来。
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition() {
return <div style={divStyle}>This should work cross-browser</div>;
}
Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致（例如：node.style.backgroundImage ）。浏览器引擎前缀都应以大写字母开头，除了 ms。因此，WebkitTransition 首字母为 ”W”。
React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。例如：
constructor(props) {
super(props);
this.state = {
robotGallery: [],
};
}
那么该如何操作呢？非常简单，只需要三个步骤。
第一步，把function 改为class，然后去掉括号，让app继承react.component。
第二步，使用react 组件类的成员、render函数，把retrun的jsx代码全部包裹起来。
第三步需要我们创建构建函数，在构建函数中初始化state状态。react的构建函数的写法我们在前面课程中学过，而在这个组件的state状态中，我们需要初始化一个机器人画廊的空列表。
interface Props {}
interface State {
robotGallery: any[]
}
为了能更好的演示setState的处理机制，我们给网站添加一个简单的鼠标点击计数器。
首先，给app组件添加计数器state，先更新interface，count: number,
然后，在构建函数中初始化计数器，count:0
接下来，给网站添加一个button然后，给按钮添加一个onclick事件，在每次点击的时候都给count加1，我们同时也console log一下当前的计数器count是多少。
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
console.log("count ", this.state.count);
}}
>
click
</button>
在渲染逻辑中加入数据的消费方式，使用consumer组件，组件内部使用花括号，只能在箭头函数内部使用共享数据。把之前的jsx渲染逻辑复制粘贴到Consumer内，我们给这个机器人画册组件的最后加一行代码，使用p tag，作者引用context中的内容，{value.username}
<appContext.Consumer>
{(value) => (
<div className={styles.cardContainer}>
<img alt="robot" src={`https://robohash.org/${id}`} />
<h2>{name}</h2>
<p>{email}</p>
<p>作者：{value.username}</p>
</div>
)}
</appContext.Consumer>
接着，我们还需要修改ant design的layout组件的样式，样式命名为main-header
，应该是白色背景，高度维持在60px；line- high等于64；需要比屏幕窄一点，所以宽度设置为88%；然后让他左右居中对齐，margin-left: auto; margin-right: auto;
.main-header {
background-color: white !important;
height: 60px;
line-height: 64px;
width: 88%;
margin-left: auto;
margin-right: auto;
}
有疑问加站长微信联系（非本文作者）
