入坑react系列一

JSX 简介

一种JavaScript的语法扩展，推荐在react中使用jsx来描述用户界面

在jsx中使用表达式

可以任意使用js表达式，在jsx当中的表达式要包含在大括号里
jsx 本身也是一种表达式，也就是说可以在if或者for语句中使用

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

jsx属性

可以使用引号来定义以字符串为值的属性
也可以使用大括号来定义以JavaScript表达式为值的属性

const elemtn = <div tabIndex="0"></div>

const element = <img src={user.avatarUrl}/>

jsx可以相互嵌套（小驼峰命名法）

jsx代表Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

---

元素渲染

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

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

更新元素渲染

function tick(){
  const element = (
    <div>
      <h1>hello,scooper!</h1>
      <h2>Time is {new Date().toLocaleTimeString()}</h2>
    </div>
   );
  ReactDOM.render(element,document.getElementById('root'));
}
setInterval(tick,1000);   //每秒钟调用一次ReactDOM.render()

React只会更新必要的部分

组件&Props

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

const element = <Welcome name="liulian" />

组件渲染

function Welcome(props){                    //注意大写W
  return <h1>test,{props.name}</h1>
}

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

1. 我们对元素调用了ReactDOM.render()方法。
2. React将{name: ‘Sara’}作为props传入并调用Welcome组件。
3. Welcome组件将Hello, Sara元素作为结果返回。
4. React DOM将DOM更新为Hello, Sara。

组件名称必须以大写字母开头

组合组件

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

function App(){
  return(
    <div>
      <Welcome name="liulian" />
      <Welcome name="soul" />
      <Welcome name="scooper" />
    </div> 
  )
  
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

组件的返回值只能有一个根元素，这也是用div包裹Welcome的原因

提取组件

笔记本 2019年2月14日

Props的只读性