-
-
举例:
const element = <h1>Hello, world!</h1>;
-
JSX
中嵌入表达式:const element = <h1> Hello, { true ? '你好 ~!' : ''}</h1>
-
JSX
本身是一个表达式,可以从函数中作为返回值function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
-
JSX
特定属性// 使用引号,来将属性值指定为字符串字面量 // 需要注意的是,在react中css的 class 属性与es6的 class重名了,顾css采用className const element = <div className="test" tabIndex="0"></div>; // 也可以使用大括号,来在属性值中插入一个 JavaScript 表达式: const element = <img src={user.avatarUrl}></img>;
-
-
- 须有一个根节点,挂在
React Dom
<div id="root"></div>
- 将React 元素渲染到根 DOM 节点中
const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
- React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
- 须有一个根节点,挂在
-
-
函数组件:它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。
function App() { return <h1>你好</h1>; } ReactDOM.render(<App />, document.getElementById("root"));
-
使用 ES6 的 class 来定义组件:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
-
Props
:父组件向子组件传值父组件 father 向子组件传递参数、方法
import React from "react"; import ReactDOM from "react-dom"; // 父组件 class Father extends React.Component { constructor(props) { super(props); this.state = { name: "zhangsan" }; } render() { return ( <Child name={this.state.name} onClick={() => { this.handleClick(); }} /> ); } handleClick(e) { console.log(this); // father } } // 子组件 class Child extends React.Component { render() { return <h1 onClick={this.props.onClick}> {this.props.name}</h1>; } } ReactDOM.render(<Father />, document.getElementById("root"));
-
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
-
函数组件传值:
function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ); }
-
-
-
-
State
:-
不要直接修改
state
,使用this.setState({comment: 'Hello'});
-
state
的更新可能是异步的,因为this.props
和this.state
可能会异步更新,所以你不要依赖他们的值来更新下一个状态。要解决这个问题,可以让
setState()
接收一个函数而不是一个对象。// Correct this.setState((state, props) => ({ counter: state.counter + props.increment }));
-
state
的更新可能会被合并,当调用setState()
的时候,React 会把提供的对象合并到当前的 state。 -
state
数据通常会被叫做“自上而下”或是“单向”的数据流,除了拥有并设置了它的组件,其他组件都无法访问。组件可以选择把它的 state 作为 props 向下传递到它的子组件中。
-
-
生命周期
-
componentDidMount
:组件已经被渲染到 DOM 中后运行。 -
componentWillUnmount
:当 DOM 中组件即将被删除的时候。
-
-