react基础知识（一）

react新人，主要用于本人学习记录用，知识点比较零散，写的比较乱，莫怪！希望对您也有帮助！

1.//对对象的限制,propTypes各阶段大小写驼峰要注意.写错不会报错，但是限制无效了
obj.propTypes = {

        name:proptypes.string.isRequired, //限制name必传且为字符串

        sex:proptyes.string,

        age:proptyes.number //限制为number

        speak:proptyes.func //限制为函数

}

2.react不能直接修改state，因为react会替我们操作dom,用VDOM虚拟DOM去更新真实DOM，和VUE同样用了虚拟DOM+diff算法来更新DOM。必须react必须用setState方法来修改state里的值。

3.react写的是jsx，很多js方法都倍react重写了和js类似但是也有很多不同的地方。

4.react三大属性 state pops refs

ref
ref是react用来操纵react组件实例或者DOM元素的接口。

（其实官方是不建议大家频繁使用ref的，这就涉及到受控组件和非受控组件的概念，后面会说。）

ref有三种，字符串形式的ref ，回调函数形式的ref和容器形式的createRef

字符串形式比简洁，但老旧可能会被官方更新抛弃掉，不建议写，需要的自行看官方文档。

现在公司最多用得是写在标签的回调函数ref形式，和容器createRef形式。

回调函数形式：

也可以在标签内写成内联样式的ref：

图中红框部分，另：react的注释是红框的input这种，{/*  console.log('注释') */}     

 createRef形式：

inputRef被声明成了createRef容器，用来存储ref，但是这个容器只能存储对应的一个ref。并不能存储多个ref。如果有新的ref操纵组件，那就要再声明一个新的ref容器。

props是用来接收，保存，传递数据的，

function 函数仅可以使用props，因为它没有自己的this，所以不能使用state和refs

通过render(){}来渲染视图，初始化渲染和每次数据更新都会调用render（）

组件中的props：

想通过获取实例的props，就必须在组件的构造器里接收props，并且通过super传props，

class obj extends Component {

        constructor(props){

                super(props)；

        }

        state = {};

}

说到组件，提一嘴PureComponent，PureComponent是Component的子类，react的组件全部继承Component。PureComponent和Component的区别在于，PureComponent组件在数据更新时会通过props和state的浅对比来实现 shouldComponentUpate()，如果发生变化再去更新dom，如果没有变化则不会更新dom。

shouldComponentUpdate（）是一个react生命周期函数，在setSate()状态更新后调用，对等VUE中updata()

PureComponent缺点
可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。
PureComponent优势
不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。

state类似VUE中的data和vuex里的state，用来存储状态的。

5.受控组件和非受控组件的区别，

受控组件

在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
 

非受控组件

表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）

结论

受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件。

基础知识（一）更完，后续随缘更新。