0
点赞
收藏
分享

微信扫一扫

React 配置化+Serverless,落地低代码+云原生全栈开发

​​立即下载​​

 React 配置化+Serverless,落地低代码+云原生全栈开发_子节点

​​立即下载​​

“低代码+云原生” ,已然成为大厂全栈解决方案新宠!本课程中,Dell老师将结合最新实践经验,以个人博客的开发为例,带领大家从解决问题角度出发,通过 “ 前端配置化+后端 Serverless” 全流程实践,助你先人一步把握技术新潮流,获取中大厂高薪人才必备的 “硬核” 技能!

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 ​​JSX 的语法​​,它允许 HTML 与 JavaScript 的混写(查看 ​​Demo02​​ )。

var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example'));

上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 ​​<​​ 开头),就用 HTML 规则解析;遇到代码块(以 ​​{​​ 开头),就用 JavaScript 规则解析。上面代码的运行结果如下。

 React 配置化+Serverless,落地低代码+云原生全栈开发_javascript_02

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员(查看 ​​demo03​​ )。

var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>,]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

上面代码的​​arr​​变量是一个数组,结果 JSX 会把它的所有成员,添加到模板,运行结果如下。

 React 配置化+Serverless,落地低代码+云原生全栈开发_子节点_03

四、组件

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类(查看 ​​demo04​​)。

var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }}); ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example'));

上面代码中,变量 ​​HelloMessage​​ 就是一个组件类。模板插入 ​​<HelloMessage />​​ 时,会自动生成 ​​HelloMessage​​ 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 ​​render​​ 方法,用于输出组件。

注意,组件类的第一个字母必须大写,否则会报错,比如​​HelloMessage​​不能写成​​helloMessage​​。另外,组件类只能包含一个顶层标签,否则也会报错。

var HelloMessage = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p>; }});

上面代码会报错,因为​​HelloMessage​​组件包含了两个顶层标签:​​h1​​和​​p​​。

组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 ​​<HelloMessage name="John">​​ ,就是 ​​HelloMessage​​ 组件加入一个 ​​name​​ 属性,值为 ​​John​​。组件的属性可以在组件类的 ​​this.props​​ 对象上获取,比如 ​​name​​ 属性就可以通过 ​​this.props.name​​ 读取。上面代码的运行结果如下。

 React 配置化+Serverless,落地低代码+云原生全栈开发_javascript_04

添加组件属性,有一个地方需要注意,就是 ​​class​​ 属性需要写成 ​​className​​ ,​​for​​ 属性需要写成 ​​htmlFor​​ ,这是因为 ​​class​​ 和 ​​for​​ 是 JavaScript 的保留字。

五、this.props.children

​this.props​​ 对象的属性与组件的属性一一对应,但是有一个例外,就是 ​​this.props.children​​ 属性。它表示组件的所有子节点(查看 ​​demo05​​)。

var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); }}); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );

上面代码的 ​​NoteList​​ 组件有两个 ​​span​​ 子节点,它们都可以通过 ​​this.props.children​​ 读取,运行结果如下。

 React 配置化+Serverless,落地低代码+云原生全栈开发_javascript_05

这里需要注意, ​​this.props.children​​ 的值有三种可能:如果当前组件没有子节点,它就是 ​​undefined​​ ;如果有一个子节点,数据类型是 ​​object​​ ;如果有多个子节点,数据类型就是 ​​array​​ 。所以,处理 ​​this.props.children​​ 的时候要小心。

React 提供一个工具方法 ​​React.Children​​ 来处理 ​​this.props.children​​ 。我们可以用 ​​React.Children.map​​ 来遍历子节点,而不用担心 ​​this.props.children​​ 的数据类型是 ​​undefined​​ 还是 ​​object​​。更多的 ​​React.Children​​ 的方法,请参考​​官方文档​​。

六、PropTypes

组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

组件类的​​PropTypes​​属性,就是用来验证组件实例的属性是否符合要求(查看 ​​demo06​​)。

var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; }});

上面的​​Mytitle​​组件有一个​​title​​属性。​​PropTypes​​ 告诉 React,这个 ​​title​​ 属性是必须的,而且它的值必须是字符串。现在,我们设置 ​​title​​ 属性的值是一个数值。

var data = 123; ReactDOM.render( <MyTitle title={data} />, document.body );

这样一来,​​title​​属性就通不过验证了。控制台会显示一行错误信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的​​PropTypes​​设置,可以查看​​官方文档​​。

此外,​​getDefaultProps​​ 方法可以用来设置组件属性的默认值。

var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return <h1> {this.props.title} </h1>; }}); ReactDOM.render( <MyTitle />, document.body );

上面代码会输出"Hello World"。

七、获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 ​​DOM diff​​ ,它可以极大提高网页的性能表现。

但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ​​ref​​ 属性(查看 ​​demo07​​ )。

var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }}); ReactDOM.render( <MyComponent />, document.getElementById('example'));

上面代码中,组件 ​​MyComponent​​ 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ​​ref​​ 属性,然后 ​​this.refs.[refName]​​ 就会返回这个真实的 DOM 节点。

需要注意的是,由于 ​​this.refs.[refName]​​ 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 ​​Click​​ 事件的回调函数,确保了只有等到真实 DOM 发生 ​​Click​​ 事件之后,才会读取 ​​this.refs.[refName]​​ 属性。

React 组件支持很多事件,除了 ​​Click​​ 事件以外,还有 ​​KeyDown​​ 、​​Copy​​、​​Scroll​​ 等,完整的事件清单请查看​​官方文档​​。

八、this.state

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI (查看 ​​demo08​​ )。

var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); }}); ReactDOM.render( <LikeButton />, document.getElementById('example'));

上面代码是一个 ​​LikeButton​​ 组件,它的 ​​getInitialState​​ 方法用于定义初始状态,也就是一个对象,这个对象可以通过 ​​this.state​​ 属性读取。当用户点击组件,导致状态变化,​​this.setState​​ 方法就修改状态值,每次修改以后,自动调用 ​​this.render​​ 方法,再次渲染组件。

由于 ​​this.props​​ 和 ​​this.state​​ 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,​​this.props​​ 表示那些一旦定义,就不再改变的特性,而 ​​this.state​​ 是会随着用户互动而产生变化的特性。

九、表单

用户在表单填入的内容,属于用户跟组件的互动,所以不能用 ​​this.props​​ 读取(查看 ​​demo9​​ )。

var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); }}); ReactDOM.render(<Input/>, document.body);

上面代码中,文本输入框的值,不能用 ​​this.props.value​​ 读取,而要定义一个 ​​onChange​​ 事件的回调函数,通过 ​​event.target.value​​ 读取用户输入的值。​​textarea​​ 元素、​​select​​元素、​​radio​​元素都属于这种情况,更多介绍请参考​​官方文档​​。


举报

相关推荐

0 条评论