摘要:中的方法调用了并传入了最新的值。在前一次渲染中,已经将的设置为,并将的设置为
本文采用 es6 语法,完全参考 https://reactjs.org/docs/安装
本文完全参考 React 官方 Quick Start 部分,除了最后的 thinking-in-react 小节
首先你需要点击安装 nodejs(npm)。然后执行:
npm install -g create-react-app
如果上述命令执行失败可以运行以下命令:
npm install -g create-react-app --registry=https://registry.npm.taobao.org
然后建立一个 react 并运行:
create-react-app myApp cd myApp npm start
这样你就简单的完成了一个 react app 建立,其目录结构如下( 图中不包括 node_modules 目录,下同 ):
Hello World我们删除一些不必要的东西,然后修改目录结构如下(不能删 node_modules 目录,如果删了就在项目目录下运行 npm i 就好了):
其中 components 是个目录。
修改 index.js 如下:
import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(hello world!
, document.getElementById("root") );
然后命令行运行:
npm start
你就可以看到熟悉的 "hello world" 了
JSXJSX 是 react 中允许 js 和 html 混写的语法格式,需要依赖 babel 编译。这里我就只研究它的语法:
const element =Hello, world!
;
可以通过花括号在其中插入表达式:
function formatName(user){ return user.firstName + " " + user.lastName; } const user = { firstName: "Harper", lastName: "Perez" }; const element = (Hello, {formatName(user)}!
); ReactDOM.render( element, document.getElementById("root") );
可以将 HTML 语句写为多行以增加可读性,用小括号括起来可以防止自动插入分号导致的错误。
JSX 也是个表达式,所以可以用在 for 和 if 中:
function getGreeting(user){ if (user){ returnHello, {formatName(user)}!
; } returnHello, Stranger.
; }
我们可以正常使用引号给 HTML 标签添加属性,也可以使用 js 表达式
const element = ; const element = ; //注意空标签以 /> 结尾,像 XML 一样
注意 html 属性名请使用小驼峰(camelCase)写法
React 会在渲染之前 escape 所有在 JSX 嵌入的值,可以有效的防止 XSS 攻击。
babel 会编译 JSX 成 React.createElement() 的参数调用:
const element = (Hello, world!
); // 编译为以下形式 const element = React.createElement( "h1", {className: "greeting"}, "Hello, world!" );
而 React.createElement() 会生成这样一个对象(React 元素):
const element = { type: "h1", props: { className: "greeting", children: "Hello, world" } };元素渲染
在 ./public/index.html 中有一个 id 为 root 的 div。我们将这个 div 作为 react 渲染的容器。
回看 hello world 程序,通过 ReactDOM.render() 方法很轻松的把内容渲染到了目标容器上:
ReactDOM.render(hello world!
, document.getElementById("root") );
当然也可以这样写:
let content =hello world!
; ReactDOM.render( content, document.getElementById("root") );
下面我们写一个复杂的,这是个实时更新的时钟,通过 setInerval 每隔 1s 调用 ReactDOM.render:
function Tick(){ const element = (); ReactDOM.render( element, document.getElementById("root") ); } setInterval(Tick, 1000);Hello, world!
It is {new Date().toLocaleTimeString()}.
重写上面时钟组件的代码如下,使其组件化程度更高:
function Clock(props){ return (组件); } function Tick(){ ReactDOM.render( //这个地方不得不传入一个参数, 但理论上获取一个时钟直接获取就可以了,这个问题我们后面再解决Hello, world!
It is {props.date.toLocaleTimeString()}.
, document.getElementById("root") ); } setInterval(Tick, 1000);
React 给我们提供了更好的管理我的代码——组件。这里我们还是首先我们先了解一下自定义标签:
const element =;
对这个标签的理解也不难,它实际上调用了 Welcome 函数,并且将所有的属性(这里只有name)打包为一个对象传给 Welcome 函数。所以下面这个代码输出 ”Hello Sara"
function Welcome(props){ returnHello, {props.name}
; } const element =; ReactDOM.render( element, document.getElementById("root") );
组件帮助我事先一些重复的工作,比如这样:
function Welcome(props){ returnHello, {props.name}
; } function App(){ return (); } ReactDOM.render(, document.getElementById("root") );
我们可以通过传递参数得到同一个组件构建的不同模块。
这里我们需要补充一个重要的概念:__纯函数!!!__
如果一个函数执行过程中不改变其参数,也不改变其外部作用于参数,当相同的输入总能得到相同的值时,我们称之这样的函数为纯函数。__React 要求所有组件函数都必须是纯函数。__
其实之前的一段代码中 Tick, Welcome 函数就可以看做是一个组件,同时 React 建议组件名的首字母大写。但是更多情况下我们会用到 es6 的语法构建组件。以之前时钟代码为例,转换过程分为五个步:
新建一个类,类名同组件函数名Clock,并继承自 React.Component;
给该类添加一个方法 render(/无参数/);
将 Clock 的函数体作为该函数的函数体;
将 render 方法中的 props 换为 this.props;
删除原有的 Clock 函数
结果如下:
class Clock extends React.Component { render(){ return (); } }Hello, world!
It is {this.props.date.toLocaleTimeString()}.
但这样计时的功能就不能用了,我们继续往下看……
State 和 Lifecycle解决上面这个问题,就需要用到 State 和 Lifecycle 的知识了
我们给 Clock 类添加一个构造函数,并且删除 Clock 标签中的参数:
class Clock extends React.Component { constructor(props){ super(props); this.state = {date: new Date()}; //state 用来记录状态 } render(){ return (); } } ReactDOM.render(Hello, world!
It is {this.state.date.toLocaleTimeString()}.
, //删除参数 document.getElementById("root") );
为了控制计时的生命周期,我们需要引入 2 个方法 componentDidMount() 和 componentWillUnmount(),前者在渲染(render方法)完成时立即执行,后者在该 render 的内容即将被移除前执行。
很明显,前者适合注册计时器,后者可以用来清除计时器(防止内存泄露)
componentDidMount(){ this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount(){ clearInterval(this.timerID); }
下一步我们重写 tick 函数,此时的 tick 函数只需要修改 this.state 就行了。注意 React 要求不能直接修改该属性,而是使用 setState() 方法,所以 tick 函数如下:
tick(){ this.setState({ date: new Date() }); }
这里需要注意的是,当 state 中有很多属性的时候,比如:
this.state = {name:"Lily", age: 12};执行 setState 方法修改其中的内容时并不会影响未修改的属性:
this.setState({name: "Bob"}); //此后 this.state 为 {name:"Bob", age: 12};此外 setState 可能是异步的,所以不要在更新状态时依赖前值:
// 这是个反例 this.setState({ counter: this.state.counter + this.props.increment, });为例解决这个问题,你可以传入函数参数:
// Correct
this.setState((prevState, props) => ({ //这里 prevState 更新前的 state 对象,props 为新值构成的对象
counter: prevState.counter + props.increment
}));
此时,完整的代码为:
class Clock extends React.Component { constructor(props){ super(props); this.state = {date: new Date()}; } componentDidMount(){ this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount(){ clearInterval(this.timerID); } tick(){ this.setState({ date: new Date() }); } render(){ return (事件); } } ReactDOM.render(Hello, world!
It is {this.state.date.toLocaleTimeString()}.
, document.getElementById("root") );
React 事件注册和原生 DOM 事件类似的,这里需要理解一些不同点即可:
事件名使用小驼峰写法,而不是全小写,例如:onclick 写作 onClick
注册事件使用花括号表达式替代原有函数写法
无法通过事件函数 return false 的方式阻止默认事件,必须显式的调用 preventDefault(),并且在使用时不用纠结浏览器兼容问题,React 已经帮你处理好了
React 建议通常不需要通过 addEventListener 添加事件,只需要像上方代码那样在 render 时绑定事件即可
在 es6 语法的组件中注册事件只需要将事件函数定义为该类的一个方法,然后在 render 时绑定即可:
render(){ return ( ); }
在 class 中,除了箭头函数定义的方法中 this 符合预期,其余方法中的 this 都是 undefined,应该手动绑定。因此以下三个按钮中 click2 会报错。
class Button extends React.Component { constructor(){ super(); this.name = "Bob"; this.click3 = this.click2.bind(this); this.click1 = () => { console.log(`hello ${this.name}`); } } click2(){ console.log(`hello ${this.name}`); } render(){ return (); } }
以上几种方法,React 推荐使用 click3 的实现方法,重写如下:
class Button extends React.Component { constructor(){ super(); this.name = "Bob"; this.click = this.click.bind(this); } click(){ console.log(`hello ${this.name}`); } render(){ return (); } }
传递参数给事件的时候,第一个参数为 id, 第二个参数为 event。实际调用可以去以下两种方式:
以上两种方法等效,后一个方法的参数 e 可以省略。
条件渲染根据不同的条件(通常指state)渲染不同的内容, 比如下面段代码可以根据 isLoggenIn 渲染不同的问候语:
function UserGreeting(props) { returnWelcome back!
; } function GuestGreeting(props) { returnPlease sign up.
; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { // 根据 isLoggenIn 渲染不同的问候语 return; } return ; } ReactDOM.render( // 你可以尝试设置 isLoggedIn={true}: , document.getElementById("root") );
下面用 class 实现一个复杂一点的,带有登录/注销按钮的:
function LoginButton(props) { return ( ); } function LogoutButton(props) { return ( ); } class LoginControl extends React.Component { constructor(props) { super(props); this.state = { isLoggedIn: false }; // 修正 this 绑定 this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const { isLoggedIn } = this.state; let button = null; if (isLoggedIn) { button =; } else { button = ; } return ( {/* Greeting 取自上一个示例 (注意这里的注释写法)*/}); } } ReactDOM.render({button} , document.getElementById("root") );
当然,对于这样一个简单的示例,使用 if 可能你会觉的太复杂了,我们也可以使用 && ?: 这些运算符来代替 if 语句,就像写 javascript 代码一样。我们极力的化简一下上面的代码:
class LoginControl extends React.Component { constructor(props) { super(props); this.state = { isLoggedIn: false }; } render() { const { isLoggedIn } = this.state; const button = isLoggedIn ? : ; return (); } } ReactDOM.render({ isLoggedIn ? "Welcome back!" : "Please sign up." }
{button}, document.getElementById("root") );
当然,如果你需要在某个条件下不进行渲染,那么直接输出 null 即可,比如下面这个组件,在 props.warn 为 false 时不渲染任何内容:
function WarningBanner(props) { if (!props.warn) { return null; } return (Warning!); }
需要注意的是,即便你输出了 null, react 也会再渲染一次。同理,componentWillUpdate 和 componentDidUpdate 也会被调用。
列表在 React 中我们可以使用 map() 方法渲染列表,比如如下这个例子,将一组数据映射(map)为一组 dom:
const data = [1, 2, 3, 4, 5]; const listItems = data.map((item) =>
我们注意到这里我们给 li (即列表的每个元素)标签加了一个 key 属性,这个 key 用来帮助 React 判断哪个元素发生了改变、添加或移除。关于这个 key 我们需要明白以下几点:
最好保证 key 是一个字符串,并且在该列表中唯一,如果你的数据中实在没有唯一的 key 可以选择,那么就使用数组的索引(index)吧(不推荐这样)
值得注意的是,如果你不给每个元素指定一个 key, react 会默认使用索引(index)作为 key
key 的值只是给 React 起到类似暗示的作用,不会真正的传递给 dom, 所以如果你需要使用 key 的值,应使用一个其它变量传递该值。
当然,上面代码我们也可以写成 inline 的形式:
const data = [1, 2, 3, 4, 5]; ReactDOM.render(
表单的处理会和原生的 html 有一些区别,因为 React 可以很好的帮助你使用 js 控制你的表单,这里我们需要引入一个新的概念:受控组件。
受控组件说白了就是其值受 react 控制的组件。其中,表单的元素通常都会具有其自己的 state,该值会随着用户的输入改变。比如下面这个例子,会在用户提交时输出用户的名字:
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ""}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert("A name was submitted: " + this.state.value); event.preventDefault(); } render() { return (); } }
不难发现,这里使用了,onchange 事件不断的将用户的输入绑定到 this.state.value 上,然后通过和用户输入同步的重绘实现数据的显示。这样可以很好的控制用户输入,比如同步的将用户输入转化为大写:
handleChange(event) { this.setState({value: event.target.value.toUpperCase()}); }
理解了上面的内容我们可以知道,单纯给一个 input 赋值一个值用户是不能修改的,比如下面这行代码:
ReactDOM.render(, mountNode);
但如果你不小心他的值设为 null 或 undefined(等同于没有 value 属性),这个 input 就可以被更改了:
ReactDOM.render(, mountNode); setTimeout(function() { ReactDOM.render(, mountNode); }, 1000);
在 React 中 textarea 也是通过 value 属性实现其内容变化的,而非其子节点:
class EssayForm extends React.Component { constructor(props) { super(props); this.state = { value: "Please write an essay about your favorite DOM element." }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert("An essay was submitted: " + this.state.value); event.preventDefault(); } render() { return (