react理念

1.先仔细观察,把UI分成组件层级。

2.创建静态版本,创建静态版本就是码代码,不需要太多的逻辑。可以采用自顶向下或者自底向上的方法。一般自顶向下会方便一些,但是大型项目会采用自顶向下,方便单元测试,当然采用哪种看自己的习惯。

3.定义UI状态的最小表示,思考为了使你的UI交互,你需要触发对底层数据模型的更改。React使用state,找出那个一个是state,每个数据需要考虑以下三个问题:

a.它是通过props从父级传来的吗?如果是,他可能不是state.

b.它随着时间推移不变吗?如果是,他可能不是state

c.你能根据组件中任何其他的state或props把它计算出来吗?如果是,它不是state.

4.找到你的state位于哪里。记住React中的数据流是单向的,并在组件层次结构中向下传递。不清楚哪个组件拥有state可以按照下面的步骤来辨别:

a.确定每一个需要这个state来渲染的组件。

b.找到一个公共所有者组件(一个层级商行高于所有其他需要这个state的组件的组件)

c.这个公共所有者组件或另一个层级更高的组件应该拥有这个state。

d.如果你没有找到可以拥有这个state的组件,创建一个仅用来曹村状态的组件并把它加入逼这个公共所有者组件层级更高的地方。

5.添加反向数据流。React的数据流很明显,让你可以很轻松的了解你的程序如何运行的,但相较于传统的双向绑定,他的代码量会稍微多一点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值