资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React

React

ningwang / 957人阅读

摘要：而我只知道有自己的虚拟，它会对比虚拟和真实的差别，然后在适当的时机更新页面。函数的第一个参数只能是一个标签，不能是并列的两个标签。第一个添加了的属性，该属性值指向，意思是该组件名为的静态属性。

网页总是一个链接着另一个的，React一大优势在于每次链接到另一个页面上去的时候，不需要向传统页面一样，得销毁所有代码，重新渲染新页面的代码，而只在一个页面上展现新的内容——单页页面。

React另一个优势是，以往的单页页面你需要考虑哪个元素要被删除、哪个元素的行为要被修改，而我们只需要告诉React我们想要的最终页面的效果，React会自动帮我们处理页面上的元素，做删除、修改等操作。

而我只知道React有自己的虚拟DOM，它会对比虚拟DOM和真实DOM的差别，然后在适当的时机更新页面。至于它怎么对比的？怎么知道差别的？怎么进行修改的？我不知道，不过，对于我们，谁在乎呢？

必须首先知道的关于React的术语

JSX语法：React特有语法，用来搭建虚拟DOM

组件（Component）：一个个代码块，用来封装各种功能，可以类比于函数（function）

props&status：组件的所有静态属性 & 所有动态属性

引入React

想要使用React，你需要先引入：

上面两个

解释：

首先引入了三个

我们看到，页面中已经添加了包含两个

元素的

。React.render()函数的第一个参数只能是一个标签，不能是并列的两个标签。不过一个标签里的子标签可以随便的添加，所以最好的方法就是，在外面添加一个

使用组件（Component）

上面的方法是直接将你想要的写在React.render()里，通常的做法是引用组件

定义一个组件

class 组件名 extends React.Component(
    //your code
);

组件里可以添加很多功能，比如想要添加一个按钮，你只需直接写你想要的DOM结构，而不需要使用javascript语法：createElement()、appendChild()等

class 组件名 extends React.Component(
    render(){
        return ();
    }
);

在组件里写好你想要的东西，使用React.render()进行渲染

React.render(
    <组件名/>,
    想要渲染的位置
)

完整代码可以如下




    
    React First Try

效果、页面结构

我们看到，页面上出现了我们想要的按钮，页面结构里也成功添加了标签，它的type属性值为submit，文字显示为Batman

效果、页面结构，哈哈哈，没啥区别，没区别就对了：

props的传递性

props只能从父元素向下传递给子元素：

当有多个属性你想传递的时候，你的代码可能就会是这样的，会重复很多遍{this.props.propsName}：

如果你不想重复很多遍繁琐的{this.props.propsName}，那你可以使用扩展运算符...表示取到所有的静态属性并且都使等于{this.props.propsName}，所以我们的代码可以稍作简化：
阅读需要支付1元查看
<