1.30
看antd,用antd写注册表单
B
biosheeep
@biosheeep
0
声望
10
帖子
480
资料浏览
1
粉丝
0
关注
biosheeep 发布的帖子
-
张梓萌的学习日志
React
JSX:js的语法扩展
1.大括号
const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );
- 大括号内可以放置任何有效的Javascript表达式
e.g.
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );
- 建议尽量将内容包裹在括号内,避免分号陷阱。
2.JSX本身也是一个表达式
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
- 可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX.
3.JSX特定属性
- (1). 使用引号,将属性值指定为字符串字面量。
const element=<div tabIndex="0"></div>; const element=<img src={user.avatarUrl}></img>;//在属性中嵌入js表达式时,大括号(对于表达式)和引号(对于字符串值)仅能使用一个。
-
React DOM 使用 camelCase定义属性的名称
- 例如,
JSX:class -> className,tabindex -> tabIndex。
- 例如,
-
(2).指定子元素
const element = <img src={user.avatarUrl} />;//当一个标签里面没有内容,可以使用/>来闭合标签。 const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );//JSX标签里面能够包含很多子元素。
- (3).防止注入攻击(XSS)
const title = response.potentiallyMaliciousInput; // 直接使用是安全的: const element = <h1>{title}</h1>;
- (4).JSX表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
e.g.以下两种代码等效
const element=( <h1 classname="greeting"> hello,world!</h1> );
const element=React.createElement( 'h1',//type { className='greeting' }, 'hello,world!'//children );
4.元素渲染
React DOM 会负责更新 DOM 来与 React 元素保持一致.
简例<div id="root"></div>
const element=<h1>hello!</h1> ReactDOM.render(element,document.getElementById('root'));//将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render()
5.更新已经渲染的元素:创建一个全新的元素,传入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);//回调函数,每秒都调用ReactDOM.render()
React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态,即只更新它需要更新的部分
6.组件&props
- 组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。
函数组件和class组件
- 最简单的定义组件的方式
以下为两个等效的组件:
function Welcome(props){ return <h1>Hello,{props.name}</h1>;//本质就是js函数 }
class Welcome ectends React.Component{ render(){ return <h1>Hello!</h1>; } }
- 渲染组件
简例
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render( element, document.getElementById('root') );//调用 ReactDOM.render() 函数,并传入 <Welcome name="Sara" /> 作为参数 //React 调用 Welcome 组件,并将 {name: 'Sara'} 作为 props 传入。 //Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。 //React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>
-
注意:组件名称必须以大写字母开头。
-
小写字母开头的组件会被React视作原生DOM标签。
- div代表 HTML 的 div 标签,
而 Welcome则代表一个组件,并且需在作用域内使用 Welcome。
- div代表 HTML 的 div 标签,
-
组合组件
简例:多次渲染Welcome组件的App组件
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );
- 提取组件(拆分)
function Comment(props){ return( <div className="Comment"> <UserInfo user={props.author}/> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); } function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); } function UserInfo(props){ return ( <div className="UserInfo"> <Avatar user={props.user}/> <div className="UserInfo-name"> {props.user.name} </div> </div> ) } const comment = { date: new Date(), text: 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', avatarUrl: 'https://placekitten.com/g/64/64', }, }; ReactDOM.render( <Comment date={comment.date} text={comment.text} author={comment.author} />, document.getElementById('root') );
所有 React 组件的 props 都不能被更改
State&生命周期
- 将函数组件转换成class组件
class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000);
- 向class组件中添加局部的state
class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div>//把this.props.date替换成this.stats.date ); } }
- 添加一个 class 构造函数,然后在该函数中为 this.state 赋初值:
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }