广州地产网站设计,淘宝店铺怎么推广和引流,深圳做网站哪家公司比较好而且不贵,装修设计比较好的网站在教程开端先说些题外话#xff0c;我喜欢在学习一门新技术或读过一本书后#xff0c;写一篇教程或总结#xff0c;既能帮助消化#xff0c;也能加深印象和发现自己未注意的细节#xff0c;写的过程其实仍然是一个学习的过程。有个记录的话#xff0c;在未来需要用到相关… 在教程开端先说些题外话我喜欢在学习一门新技术或读过一本书后写一篇教程或总结既能帮助消化也能加深印象和发现自己未注意的细节写的过程其实仍然是一个学习的过程。有个记录的话在未来需要用到相关知识时也方便自己查阅。 React既不是一个MVC框架也不是一个模板引擎而是Facebook在2013年推出的一个专注于视图层用来构建用户界面的JavaScript库。它推崇组件式应用开发而组件component是一段独立的、可重用的、用于完成某个功能的代码包含了HTML、CSS和JavaScript三部分内容。React为了保持灵活性只实现了核心功能提供了少量的API一些DOM方法都被剥离到了react-dom.js中。这么做虽然轻巧但有时候要完成特定的业务场景还是需要与其他库结合例如Redux、Flux等。React不仅让函数式编程愈加流行还引入了JSX语法能把HTML嵌入进JavaScript中和Virtual DOM技术大大提升了更新页面时的性能。在React中每个组件的呈现和行为都由特定的数据所决定而数据的流动都是单向的即单向数据流。在编写React时推荐使用ES6语法官方的文档也使用了ES6语法因此在学习React之前建议对ES6有所了解避免不必要的困惑。 下面是一段较为完整的React代码本文大部分的示例代码来源于此阅读下面的代码可以对React有一个感性的认识。 import React, { Component } from react;
import ReactDOM from react-dom;
import PropTypes from prop-types;
class Search extends Component {//static defaultProps {// url: http://jane.com//};constructor(props) {super(props);this.state {txt: 请输入关键字};}componentWillMount() {console.log(component will mount);}componentDidMount() {console.log(component did mount);this.refs.txt.addEventListener(blur, (e) {this.getValue(e);});console.log(this.refs)}handle(keyword, e) {console.log(keyword);console.log(this);console.log(this.select.value);}getValue(e) {console.log(e.target.value);}refresh(e) {this.setState({type: e.target.value});}render() {console.log(render);let {type} this.state;console.log(type);return (div{this.props.children}select value{type} onChange{this.refresh.bind(this)}option value1标题/optionoption value2内容/option/selectselect defaultValue{2} ref{(select) this.select select}option value1标题/optionoption value2内容/option/selectinput placeholder{this.state.txt} reftxt defaultValue教程 style{{marginLeft:10, textAlign:center}}/button classNamebtn data-url{this.props.url} onClick{this.handle.bind(this, REACT)}{搜索}/button/div);}
}
Search.defaultProps {url: http://jane.com
};
ReactDOM.render(Search urlhttp://www.pwstrick.comh1React扫盲教程/h1/Search,document.getElementById(container)
); 一、JSX语法 JSX是对JavaScript语法的一种扩展它看起来像HTML同样拥有清晰的DOM树状结构和元素属性如下代码所示。但与HTML不同的是为了避免自动插入分号时出现问题在最外层得用圆括号包裹并且必须用一个元素包裹例如下面的div元素其它元素所有的元素还必须得闭合。 (divinput placeholder{this.state.txt} /button classNamebtn{搜索}/button
/div) 1元素 JSX中的元素分为两种DOM元素和组件元素也叫React元素DOM元素就是HTML文档映射的节点首字母要小写而组件元素的首字母要大写。无论是DOM元素还是组件元素最终都会通过React.createElement()方法转换成JSON对象如下所示JSON对象是简化过的。 //React.createElement()方法
React.createElement(div, null, [React.createElement(input, { placeholder: ${this.state.txt} }, null),React.createElement(button, { className: btn }, 搜索)
]);
//简化过的JSON对象
{type: div,props: {children: [{type: input,props: {placeholder: ${this.state.txt}}},{type: button,props: {className: btn,children: 搜索}}]}
} 由于JSX中的元素能够被编译成对象因此还可以把它们应用到条件、循环等语句中或者作为一个值应用到变量和参数上。 2属性 JSX中的属性要用驼峰的方式表示例如maxlength要改成maxLength、readonly要改成readOnly。还有两个比较特殊的属性class和for由于这两个是JavaScript中的关键字因此要改名前者改成className后者改成htmlFor。 JSX中的属性值不仅可以是字符串还可以是表达式。如果是表达式那么就要用花括号“{}”包裹。而在JSX中任何位置都可以使用表达式。 有一点要注意为了防止XSS的攻击React会把所有要显示到DOM中的字符串进行转义例如“搜索”转义成“lt;搜索gt;”。 3Virtual DOM 众所周知DOM操作会引起重绘和重排而这是非常消耗性能的。React能把元素转换成对象也就是说可以用对象来表示DOM树而这个存在于内存中的对象正是Virtual DOM。Virtual DOM相当于一个缓存当数据更新后React会重新计算Virtual DOM再与上一次的Virtual DOM通过diff算法做比对如下图所示最后只在页面中更新修改过的DOM。由于大部分的操作都在内存中进行因此性能将会有很大的提升。 二、组件 组件的构建方式有3种React.createClass()、ES6的类和函数。当用ES6的类来构建时所有的组件都继承自抽象基础类React.Component该抽象类声明了state、props、defaultProps和displayName等属性定义了render()、setState()和forceUpdate()等方法。注意在组件的构造函数constructor()中要调用super()函数用于初始化this和执行抽象类的构造函数。 import React, { Component } from react;
class Search extends Component {constructor (props) {super(props);}render() {return ();}
} 组件中的render()方法是必须的它会返回一个元素、数字或字符串等各种值。render()是一个纯函数即输出返回值只依赖输入参数并且执行过程中没有副作用不改变外部状态。 组件之间可以相互嵌套而它们的数据流是自顶向下流动的如下图所示即父组件将数据传给子组件。此处传递的数据就是组件的配置参数由props属性控制而组件的内部状态保存在state属性中。 1props 如果一个组件要做到可复用那么它应该是可配置的。为此React提供了props属性它的使用如下所示。 class Search extends Component {render() {return (divbutton classNamebtn data-url{this.props.url}{搜索}/button/div);}
}
Search urlhttp://www.pwstrick.com / 先给Search组件定义一个名为url的属性然后在组件内部可以通过引用props属性来获取url的值。有一点要注意props是只读属性因此在组件内部无法修改它。 React为组件提供了默认的配置可以调用它的静态属性defaultProps。总共有两种写法实现默认配置如下代码所示其中写法一用到了ES6中的static关键字。 //写法一
class Search extends Component {static defaultProps {url: http://jane.com};
}
//写法二
Search.defaultProps {url: http://jane.com
};
Search / 此时即使组件不定义url属性在组件内部还是会有值。 props还有一个特殊的属性children它的值是组件内的子元素如下代码所示children属性的值为“h1React扫盲教程/h1”。 class Search extends Component {render() {return (div{this.props.children}/div);}
}
Searchh1React扫盲教程/h1
/Search 2state 组件的呈现会随着内部状态和外部配置而改变通常会在组件的构造函数中初始化需要的内部状态如下代码所示为文本框添加默认提示。 class Search extends Component {constructor (props) {super(props);this.state {txt: 请输入关键字};}
} React还提供了setState()方法用于更新组件的状态。注意不要通过直接为state赋值的方式来更新状态因为setState()方法在更新状态后还会调用render()方法重新渲染组件。此外React为了提升性能会把多次setState()调用合并成一次像下面这样写打印出的txt属性的值仍然是前一次的值因此状态更新是异步的。 this.setState({txt: React
});
console.log(this.state.txt); //请输入关键字 3生命周期 组件的生命周期life cycle可简单的分为4个阶段初始化Initialization、挂载Mounting、更新Updation和卸载Unmounting具体如下图所示。每个阶段都会对应几个方法其中包含will的方法会在某个方法之前被调用而包含did的方法会在某个方法之后被调用。 1、在初始化阶段会设置props、state等属性。 2、在挂载阶段两个挂载方法将以组件的render()为分界点。 3、更新阶段发生在传递props或执行setState()的时候。 4、当一个组件被移除时就会调用componentWillUnmount()方法。 当组件在页面中输出时在控制台将依次输出“will mount”、“render”和“did mount”。 class Search extends Component {componentWillMount() {console.log(will mount);}componentDidMount() {console.log(did mount);}render() {console.log(render);}
} 三、React和DOM 1ReactDOM 如果要把组件添加到真实的DOM中那么就需要使用ReactDOM中的render()方法如下代码所示其实在前面已经调用过几次这个方法了。 ReactDOM.render(Search /,document.getElementById(container)
); 此方法可接收三个参数第一个是要渲染即添加的元素第二个是容器元素即添加的位置第三个是可选的回调函数会在渲染或更新之后执行。 ReactDOM还提供了另外两个方法unmountComponentAtNode()和findDOMNode()具体可参考官方文档。 2事件 React实现了一种合成事件SyntheticEvent合成事件只有冒泡传播并且它的注册方式、事件对象和事件处理程序中的this对象都与原生事件不同。 1、合成事件会通过设置元素的属性来注册事件但与原生事件不同的是属性的命名要用驼峰的写法而不是全部小写并且属性值可以是任意类型而不再仅是字符串如下代码所示。React已经封装好了一系列的事件类型原生事件类型的一个子集并且已经处理好它们的兼容性提供的事件类型可以参考官网。 class Search extends Component {handle(e) {console.log(click);}render() {return (divbutton onClick{this.handle}搜索/button/div);}
} 2、合成事件中的事件对象event object是一个基于W3C标准的SyntheticEvent对象的实例它不但与原生的事件对象拥有相同的属性和方法例如cancelable、preventDefault()、stopPropagation()等还完美解决了兼容性问题。 3、React的事件处理程序中的this对象默认是undefined因为注册的事件都是以普通函数的方式调用的。如果要让this指向当前组件那么可以用bind()方法或ES6的箭头函数。 class Search extends Component {//bind()方法handle1(e) {console.log(this);}//箭头函数handle2 (e) {console.log(this);};render() {return (divbutton onClick{this.handle1.bind(this)}搜索/buttonbutton onClick{this.handle2}搜索/button/div);}
} 4、在向事件处理程序传递参数时要把事件对象放在最后如下代码所示。 class Search extends Component {handle(keyword, e) {console.log(keyword);console.log(this);}render() {return (divbutton onClick{this.handle1.bind(this, REACT)}搜索/button/div);}
} 5、如果要为组件中某个元素注册原生事件那么可以利用元素的ref属性和组件的refs对象实现。例如实现一个文本框在失去焦点时打印输出它的值如下代码所示。注意原生事件的注册要在componentDidMount()方法内执行。 class Search extends Component {componentDidMount() {this.refs.txt.addEventListener(blur, (e) {this.getValue(e);});}getValue(e) {console.log(e.target.value);}render() {return (divinput placeholder{this.state.txt} reftxt //div);}
} 在上面的代码中ref属性的值被设为了“txt”此时在refs对象中就会出现一个名为“txt”的属性关于这个它们的具体用法可以参考官网。 3表单 HTML中的表单元素例如input、select和radio等在React都有相应的组件实现React还把表单中的组件分为受控和非受控。 受控组件controlled component的状态由React组件控制它的每个状态的改变都会有一个与之对应的事件处理程序并且在程序内部会调用setState()方法更新状态。React推荐使用受控组件下面是一个受控组件注意选择框select元素中的value属性表示选中项。 class Search extends Component {refresh(e) {this.setState({type: e.target.value});}render() {let {type} this.state;return (divselect value{type} onChange{this.refresh.bind(this)}option value1标题/optionoption value2内容/option/select/div);}
} 非受控组件uncontrolled component的状态不受React组件控制也不用为每个状态编写对应的事件处理程序但可以通过元素的ref属性获取它的值非受控组件的写法更像是传统的DOM操作。在使用非受控组件时如果要为其设置默认值可以使用属性defaultValue或defaultChecked具体如下所示。 class Search extends Component {handle(e) {console.log(this.select.value);}render() {return (divselect defaultValue{2} ref{(select) this.select select}option value1标题/optionoption value2内容/option/selectbutton onClick{this.handle.bind(this)}搜索/button/div);}
} 4样式 在React问世的初期由于它推崇组件模式因此会要求HTML、CSS和JavaScript混合在一起这与过去的关注点分离正好相反。React已将HTML用JSX封装而对CSS的封装则抛出了CSS in JS的解决方案即用JavaScript写CSS。 在React中的元素都包含className和style属性前者可设置CSS类后者可定义内联样式。style的属性值是一个对象其属性就是CSS属性但属性名要用驼峰的方式命名例如margin-left改成marginLeft具体如下所示。 class Search extends Component {render() {return (divinput style{{marginLeft:10, textAlign:center}}//div);}
} 注意属性名不会自动补全浏览器前缀并且React会自动给需要单位的数字加上px。在MDN上给出了CSS属性用JavaScript命名的对应关系可在此处参考。 由于React处理CSS的功能并不强大因此市面上出现了很多与CSS in JS相关第三方类库例如classnames、polished.js等有外国网友还专门搜集了40多种相关的类库。 虽然这种方式能让组件更方便的模块化但同时也彻底抛弃了CSS既不能使用CSS的特性例如选择器、媒体查询等也无法再用CSS预处理器例如SASS、LESS等。为了解决上述问题又有人提出了CSS Modules。 如果要在React中制作动画官方推荐使用React Transition Group和React Motion。不过你也可以使用普通的动画库例如animejs只要在DOM渲染好以后调用即可。 四、React进阶 1跨级通信 React数据流动是单向的组件之间通信最常见的方式是父组件通过props向子组件传递信息但这种方式只能逐级传递如果要跨级通信即父组件与孙子组件通信那么可以利用状态提升实现但这样的话代码会显得很不优雅并且很臃肿。好在React包含一个Context特性可以满足刚刚的需求不过官方不建议大量使用该特性因为它不但会增加组件之间的耦合性还会让应用变得混乱不堪下图演示了两种数据传递的过程。在理解Context特性后能更合理的使用状态管理容器Redux。 当一个组件设置了Context后它的子组件就能直接访问Context中的内容Context相当于一个全局变量但作用域仅限于它的子组件中。总共有两种Context的实现方式都基于生产者消费者模式。首先来看第一种具体代码如下所示。 import PropTypes from prop-types;
class Grandpa extends Component {getChildContext() {return { name: strick };}render() {return (Son /);}
}
Grandpa.childContextTypes {name: PropTypes.string
};
class Son extends Component {render() {return (Grandson /);}
}
class Grandson extends Component {render() {let { name } this.context;return (div爷爷叫{name}/div);}
}
Grandson.contextTypes {name: PropTypes.string
}; 在上面的代码中创建了三个组件Grandpa是最上层的父组件生产者Son是中间的子组件Grandson是最下层的孙子组件消费者。首先在Grandpa中声明了一个静态属性childContextTypes和一个getChildContext()方法这两个是必须的否则无法实现数据传递。其中childContextTypes是一个对象它的属性名就是要传递的变量名而属性值则通过PropTypes指明了该变量的数据类型getChildContext()方法返回的对象就是要传递的一组变量和它们的值。然后在Son中渲染Grandson组件。最后为Grandson声明一个静态属性contextTypes同样是个对象并且属性名和属性值与childContextTypes中的相同。 第二种方式是在React 16.3的版本中引入的比起第一种方式写法更加简洁并且Context的生产者和消费者都以组件的方式实现如下所示。 let NameContext React.createContext({ name });
class Grandpa extends Component {render() {return (NameContext.Provider value{{name: strick}}Son //NameContext.Provider);}
}
class Son extends Component {render() {return (Grandson /);}
}
class Grandson extends Component {render() {return (NameContext.Consumer{(context) (div爷爷叫{context.name}/div)}/NameContext.Consumer);}
} 上面的代码依然创建了三个组件名字也和第一种方式中的相同。除了中间组件Son之外另外两个组件的内容发生了变化。首先通过React.createContext()方法创建一个Context对象此对象包含两个组件Provider和Consumer前者是生产者后者是消费者。然后在Grandpa的render()方法中设置Provider组件的value属性此属性相当于getChildContext()方法。最后在Grandson组件中调用Context对象注意Consumer组件的子节点只能是一个函数。 2高阶组件 高阶组件higher-order component简称HOC不是一个真的组件而是一个函数它的参数中包含组件其返回值是一个功能增强的新组件。高阶组件是一个没有副作用的纯函数它遵循了装饰者模式的设计思想不会修改传递进来的原组件而是对其进行包装和拓展不仅增强了组件的复用性和灵活性还保持了组件的易用性。下面演示了高阶组件是如何控制props和state的。 class Button extends Component {render() {return (divbutton{ this.props.txt }/button/div);}
}
//高阶组件
function HOC(Mine) {class Wrapped extends Component {constructor() {super();this.state {txt: 提交};}render() {return Mine {...this.state} /;}}return Wrapped;
}
let Wrapped HOC(Button); 高阶组件HOC()的函数体中创建了一个名为Wrapped的组件在它的构造函数中初始化了state状态。然后在其render()方法中使用了{...this.state}这是JSX的一种语法在state对象前添加扩展运算符可把它解构成组件的一组属性。最后在Button组件中调用传递进来的属性。 高阶组件还有迁移重复代码、劫持render()方法和引用refs等功能。 五、后记 就先整理这些了如有错误欢迎指正后面还会陆续加入漏掉的知识点。 最后我想说下其实自己也是一个React初学者通过这样的梳理后对React有了更为深刻的理解在后续的学习中能容易的吸收新的知识点。 源码下载 https://github.com/pwstrick/react 参考资料 React中文文档 《深入React技术栈》 React.js 小书 React WIKI 《深入浅出React和Redux》 React入门实例教程 阮一峰 React入门教程 全栈React: 第1天 什么是 React? 深度剖析如何实现一个 Virtual DOM 算法 從零開始學 ReactJS react component lifecycle CSS Modules 入门及 React 中实践 CSS in JS 简介 聊一聊我对 React Context 的理解以及应用 转载于:https://www.cnblogs.com/strick/p/10015551.html
