
2、在Parent组件中使用Reactmemo包裹List组件。
3、这样就可以将泛型组件传递给Parent组件并使用Reactmemo进行优化了。React并不是什么问题都解决,只帮助解决数据和页面渲染的东西,至于组件怎么传值?并不负责,交给其他组件来做。
在小型项目中,光靠React就可以。比如todolist,它只有两层组件,借助React内部的传值机制就可以了。
在大型项目里,React单单来使用是绝对不够的,所以需要使用 redux,mobx这样的数据层框架来辅助开发。
1维护容易
2方便前端自动化测试买了一包大鸡排也没心思吃,解决完这个问题后,狠狠地咬了一口大鸡排!
之前每次用 fetch 都是获取数据,没有提交过参数,但是现在做的登录功能,是要将表单中输入的用户名和密码拿到后提交给后台服务器端,并得到返回数据来判断用户名和密码是否正确。
1、 react 表单
按照以往 js 获取表单数据的方法,当然是获取到该 input 的 ID,然后根据 id 定位后获取到其 value 值,但是很可惜,react 不能这样做。
react 对表单元素做了优化处理,对其进行抽象处理,使其使用方式更统一和规范。
约束性组件和非约束性组件
约束性组件,简单来说就是React管理了它的value,而非约束性组件的value则是由原生的DOM管理。
所以在写法上区别很大:
非约束性组件写法:
defaultValue 中就是原生DOM中的value属性,非约束性组件中的value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件写法:
约束性组件中的value值不再是一个写死的值,而是写在 state 中,由 thishandleChange 负责管理。
在 handleChange 中可以重新渲染 state 的值,同时也可以对输入的内容进行校验。
2、fetch 数据请求
当我们拿到用户名和密码时,需要将数据提交给服务器端并得到返回值。fetch 传参数必须要是 formData,就是这个折磨了我好久。
终于完成简易的登录功能了。
简单说一下rex和React是怎么配合的。react-rex提供了connect和Provider两个好基友,它们一个将组件与rex关联起来,一个将store传给组件。组件通过dispatch发出action,store根据action的type属性调用对应的recer并传入state和这个action,recer对state进行处理并返回一个新的state放入store,connect监听到store发生变化,调用setState更新组件,此时组件的props也就跟着变化
值得注意的是connect,Provider,是react-rex提供的,rex本身和react没有半毛钱关系,它只是数据处理中心,没有和react产生任何耦合,是react-rex让它们联系在一起。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)