SeasonQ

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。 1、组件定义的两种方式 1.1 函数定义组件 定义一个组件最简单的方式是使用JavaScript函数： function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。 1.2 ES6 class 来定义组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 2、组件渲染 React元素也可以是用户自定义的组件。当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render(

到目前为止我们只学习了一种方法来更新UI。调用 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); 将时钟封装为Clock组件 function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000); 1. 将函数转换为类 可以通过5个步骤将 函数组件 转换为 类组件 创建一个名称扩展为 React

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: React事件绑定属性的命名采用 驼峰式 写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法) 例如，传统的 HTML： <button onclick="activateLasers()"> Activate Lasers </button> React 中稍稍有点不同： <button onClick={activateLasers}> Activate Lasers </button> 在 React 中另一个不同是你不能使用返回 false 的方式 阻止默认行为 。你必须明确的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写： <a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a> 在 React，应该这样来写： function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href=