react知识点汇总

①uncontrolComponent & controlComponent

　　　　　　　　　　If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine. You don’t have to listen to what the various articles are saying is “bad.”

feature	uncontrolled	controlled
one-time value retrieval (e.g. on submit)	✅	✅
validating on submit	✅	✅
instant field validation	❌	✅
conditionally disabling submit button	❌	✅
enforcing input format	❌	✅
several inputs for one piece of data	❌	✅
dynamic inputs	❌	✅

　　　　uncontrolComponent

　　　　　　当不需要验证，或者提交的时候再验证等简单的功能的时候，input应该使用更为简单的 uncontrolComponent 用法的关键点为： ref获取该DOM的值

　　　　　　<input ref=(ref)=>{this.input = ref} />
　　　　　　//然后在需用用值的地通过this.input.value获取该值即可

　　　　或者在onchange里实时检验，即使用户输入错误也让他输入，但是我们会实时给出错误的提示

　　　　　　　　onChange={(e) => {

                           let v = e.target.value;

                           if (v) {

                              if (/^[0-9]{1,30}$/.test(v)) {

                                 //成功

                                 this.showError();

                              } else {

                                 this.showError("请输入正确的卡号");

                              }

                           } else {

                              this.showError("请输入卡号");

                           }

                           this.setState({

                              inputValue: v

                           });

                        }}

　　　　controlComponent

　　　　　　需要立即验证，更改输入格式等则使用 controlComponent

-----------------------------------2017.12.25新增：----------------------------

知识点一：按照功能将此功能下的所有数据请求和管理，都存放在唯一一个根组件（容器组件）中；

　　　　　　就像: OBT中的Pay.js，所有ajax都在这里，每当数据请求了，就改变自生的state，触发re-render，然后重新传递给子组件新的props；

　　　　　　Pay.js就是“容器组件”，而其子组件，如：Panel，就是“展示组件”（不需要自己的state，数据都从父的“容器组件”中获取）；

知识点二：使用 PropTypes 和 getDefaultProps()；

一定要写PropTypes，切莫为了省事而不写
如果一个Props不是requied，一定在getDefaultProps中设置它

React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。

/* 基本用法一 */

Person.defaultProps = {

  name: 'Guest'

};

Person.propTypes = {

  name: React.PropTypes.string

};

/* 基本用法二 */

propTypes: {

    myArray: React.PropTypes.array,

    myBool: React.PropTypes.bool,

    myFunc: React.PropTypes.func,

    myNumber: React.PropTypes.number,

    myString: React.PropTypes.string，

     // You can chain any of the above with `isRequired` to make sure a warning

    // is shown if the prop isn't provided.

    requiredFunc: React.PropTypes.func.isRequired

}

　　　　　　当props是更为复杂的结构对象，

如：

{

  text: 'hello world',

  numbers: [5, 2, 7, 9],

}

则可使用进阶使用方法：shape() 和 arrayOf()，详细教程

知识点三：Do not check existence of props at the root of a component. Components should not have two possible return types.



-----------------------------------2017.12.26新增：----------------------------
React的一些编程思想：
state尽量抽取到公共父组件（容器组件）上，子组件（展示组件）不应该有自己的state，数据都是父组件专递过来的，子组件的更新依赖于父的state的更新引起的专递给自己的props的数据的改变，很多时候子组件自己需要自己控制自己更新，
那怎么办呢？只能操作父组件上的state.
由于组件只能更新它们自己的 state(状态)，所以父组件应给相应的子组件传递setState回调方法。子通过此回调来改变父的state，从而实现自身的更新；

巴特西

react知识点汇总

最新文章

热门文章