React learning

概览

React 的核心思想是:封装组件。

各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI。

React 大体包含下面这些概念:

  • 组件
  • JSX
  • Virtual DOM
  • Data Flow

JSX

使用jsx

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('root')
  );

我们直接定义好一个jsx,然后在ReactDOM中调用就行

样式添加

var myStyle = {
  fontSize: 100,
  color: '#FF0000'
};
const element = <h1 style={myStyle}>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('root')
  );

和jsx一样,我们先定义再调用,调用时需要用大括号{}

组件 & Props

组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件

组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。

function Hello(props){
  return <h1>hello {props.name}</h1>
}
const element = <Hello name="code" />;
ReactDOM.render(
    element,
    document.getElementById('root')
  );

我们看看上面的例子发生了什么:

  • 1.<Hello name="code" />元素中调用了ReactDOM.render()方法
  • 2.React将{name:'code'}做为props传入到组件Hello中
  • 3.Hello组件根据传入的值来渲染<h1>hello {props.name}</h1>元素,得到结果<h1>hello code</h1>
  • 4.React DOM将DOM更新为<h1>Hello, code</h1>。
最后修改:2019 年 10 月 04 日 09 : 38 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论