react-白红宇

react

阅读量：2124 次

发布时间：2019-04-30

本文共 1225 字，大约阅读时间需要 4 分钟。

jsx

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

通过调用 ReactDOM.render() 来修改我们想要渲染的元素

组件

// 函数组件// 接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素function Welcome(props) {
     return Hello, {
   props.name}
;}// class组件class Welcome extends React.Component {
     render() {
       return Hello, {
   this.props.name}
;  }}

注意：组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div代表 HTML 的 div 标签，而 <Welcome 则代表一个组件，并且需在作用域内使用 Welcome。

时钟小例子

class Clock extends React.Component {
     constructor(props) {
       super(props);    this.state = {
   date: new Date()};  }  componentDidMount() {
       this.timerID = setInterval(      () => this.tick(),      1000    );  }  componentWillUnmount() {
       clearInterval(this.timerID);  }  tick() {
       this.setState({
         date: new Date()    });  }  render() {
       return (      
           
    Hello, world!
        
    现在时间是 {
   this.state.date.toLocaleTimeString()}
      
   
    );  }}ReactDOM.render(  
   ,  document.getElementById('root'));

转载地址：http://fqyrf.baihongyu.com/

你可能感兴趣的文章

jsx

组件

Hello, { props.name}

Hello, { this.props.name}

Hello, world!

现在时间是 { this.state.date.toLocaleTimeString()}

Hello, {
props.name}

Hello, {
this.props.name}

现在时间是 {
this.state.date.toLocaleTimeString()}