react 细节整理

Posted 2021-03-03 yincece0316

前言:

　　在使用react时针对于其的大面的语法，规范等是有了解的，可能会忽略了些细节的东西导致在调试的时候会很麻烦，今天我将针对其中的细节点进行下整理，希望能够让大家更加深入，全面地地去了解react。

 

细节

　　1. 组件类的render中只能包含一个顶级标签

　　// 错误写法
　　var ErrorComponent = React.createClass({
    　　render: function() {
        　　return  <span>test1</span>
                　　<span>test2</span>;
    　　}
　　})
　　// 正确写法
　　var SuccessComponent = React.createClass({
    　　render: function() {
        　　return
            　　<div>
                　　<span>test1</span>
                　　<span>test2</span>
            　　</div>;
    　　}
　　})

　　2. 两个特殊属性: 由于class和for是js的关键字，故此class->className  for->htmlFor 

　　3. this.props可以一一获取其对应的组件的属性值，但是有一特殊值-this.props.children(表示组件的子节点)，不同情况返回不同类型的值

　　　　　3.1 undefined: 无子节点

　　　　　3.2 object：只有一个子节点

　　　　　3.3 array: 两个及以上子节点

　　　　有人说了使用这个属性太麻烦了，还需要判断类型。。答案是否定的。。react提供了React.Children的工具方法来处理this.props.children的属性值

var SuccessComponent = React.createClass({
    render: function() {
        return (
            <ul>
                {
                    React.Children.map(this.props.children, function (dom) {
                        return <li>{dom}</li>;
                    })
                }
            </ul>
        );
    }
});

ReactDOM.render(
    <SuccessComponent>
        <span>test1</span>
        <span>test2</span>
        <span>test3</span>
    </SuccessComponent>,
    document.body
);

　　4.ref

　　　　前言: 组件并不是真实的DOM，而是存在于内存中的数据结构-虚拟DOM,  只有当插入到文档中才会形成真实的DOM,所有DOM的改动都会先更新虚拟DOM之后再根据具体的变化更新到对应的真实DOM上

　　　　作用: ref用于引用真实DOM,因此必须保证操作this.refs.[refName]的时候必须保证虚拟DOM插入到文档中才可使用

var FormComponent = React.createClass({
    focusUserName: function () {
        this.$refs.userName.focus();
    },
    render: function() {
        return (
            <div>
                <input type="text" name="userName" ref="userName" />
                <button onClick={this.focusUserName}></button>
            </div>
        );
    }
});

 

谢谢客官的品尝，如有不严谨和错误地方请希望指正，祝大家工作和生活顺利 ！