React使用技巧总结 <一>

1. 当渲染的只有一个目标元素的时候可以直接省去 return

function FormList({ color = 'blue', text = 'Confirm'}) {
  return(
    <button className = {`btn btn-${color}`}>
      <em>{text}</em>
    </button>
  )
}


const FormList = ({ color = 'blue', text = 'Confirm'}) => (
  <button className = {`btn btn-${color}`}>
     <em>{text}</em>
  </button>
)

2.reactDom.render 中是以 “,” 作为分割的, 原因就是 render 出来的是对象的集合, 但是，当组件用一个 div 包裹的时候，这时候 div 内部是不能有逗号的

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

例如:

ReactDOM.render(
  <div>
    <Header/>
    <Routes history={browserHistory}/>
  </div>,
  document.getElementById('root')
);

3.ReactDom.render 不仅仅只能写在页尾，同时也可以写在函数体中

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

它利用 setInterval() 定时器的回调每一秒都会调用一次 ReactDOM.render() 来更新 DOM。

在实际使用的时候，大多数 React 应用只调用一次 ReactDOM.render() 一次。下一章节我们会学习这些代码如何被包裹在有状态的组件之中。

4. 一个基本的 react 类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

5. 渲染一个组件

const element = <a/>;  //React元素代表DOM标签

const element = <Welcome name="Sara" />;  //React元素也可以代表用户自定义组件：

当 React 认为一个元素代表用户自定义组件时，它通过单个对象传递 JSX 属性到这个组件。我们叫这个对象为 “属性”。

我们在一个组件内部，再去渲染一个组件的话，举个例子，这段代码渲染 “Hello, Sara” 到页面上：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

6. 一个经典例子, 简单但是可以悟出来很多

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};

ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />,
  document.getElementById('root')
);

React使用技巧总结 <一>

猜你喜欢