React-引领未来的用户界面开发框架-读书笔记（二）
第4章 数据流
Props(properties 特性)用途：可以把任意类型的数据传递给组件 2种方式设置props：
setProps注意点：
可以通过this.prpos访问props，但绝不能通过这种方式修改它。一个组件绝对不可以修改自己的props。 在jsx中，可以把props设置为字符串： <a href="http://www.molinblog.com">molinblog</a>
也可以使用{}语法来设置，注入JavaScript传递任意类型的变量： {'http://www.molinblog.com/blog/' + blog.id}>{blog.title}</a>
还可以使用JSX的展开语法把props设置成一个对象： render () {
var props = {
one: 'foo',two: 'bar'
};
return (
<SurveyTable {...props} />
)
}
props还可以用来添加事件处理程序： render () {
return (
<a className='button save' onClike={this.handleClick}>Save</a>
);
}
handleClick: function() {
// ...
}
PropsTypes
class SurveyTableRow extends React.Component {
propsType: {
survey: React.PropTypes.number.shape({
id: React.PropTypes.number.isRequired
}).isRequired,onClick: React.PropTypes.func
},// ...
}
一脸黑线？？？？？？？？？、、 getDefaultProps
es5中使用示例： var NewDom = React.createClass({//类名一定要大写开头
getDefaultProps: function() {//设置默认属性
return {title:'133'};
},propTypes: {
title:React.PropTypes.string,},136)">//属性校验器，表示必须是string
render: function() {
return <div>{this.props.title}</div>;//变量用花括号标识
}
});
es6中使用示例： const React = require('react');
const ReactDOM = require('react-dom');
import {Promise} from 'es6-promise'
class NewDom extends Component{
//不能再组件定义的时候定义一个属性
render() {
return <div >{this.props.title}</div>;
}//开头花括号一定要和小括号隔一个空格，否则识别不出来
}
//es6 这两个属性不能写在class内。
NewDom.propTypes={//属性校验器，表示改属性必须是string，否则报错
title: React.PropTypes.string,}
NewDom.defaultProps={title:'fsdfd133'};//设置默认属性
ReactDOM.render((
<NewDom></NewDom>
),document.querySelector('#init'))
state
放在state和props的各是哪些部分？
总结
第5章 事件处理展示页面＋js响应事件＝用户界面整体设计 绑定事件处理器react处理的事件本质和原生js一样（包括命名） jsx版： <button className="btn btn-save" onClick={this.handleSave}>Save</button>
js版 React.DOM.button({className: "btn btn-save",onClick: this.handleSaveClicked},"Save");
jsx的写法类似HTML内联时间处理器属性，比如onClick，但其实在底层实现上并没有使用HTML的onClick属性（而是通过事件处理之类的方法？）。 react对各类事件类型提供良好的支持，具体支持列在这里 其中绝大部分事件不需要额外的处理就能工作，但是触控事件需要通过调用以下的代码手动启用： React.initializeTouchEvents(true) // 是否已被改动？？？？
事件和状态解决组件随着用户输入而改变的问题，经过特定组件渲染后，绑定的事件处理器方法负责处理行为。 根据状态进行渲染可以在render中读取this.state，然后根据this.state的值渲染出不同的页面。 更新状态更新组件状态有两种方案：组件的setState方法和replaceState方法。replaceState用一个全新的state对象完整地替换掉原有的state。使用不可变数据结构来表示时，这种方式很有效，不过很少应用于其他场景下。 ??永远不要尝试通过setState或者replaceState以外的方式去修改state对象。类似this.saveInProgress = true通常不是一个好主意，因为它无法通过React是否需要重新渲染组件，而且可能会导致下次调用setState时出现意外结果。 本节可参考极客学院 事件对象使用event.target.value可以获取表单中input值。 事件处理程序通过 合成事件（SyntheticEvent）的实例传递，SyntheticEvent 是浏览器原生事件跨浏览器的封装。SyntheticEvent 和浏览器原生事件一样有 stopPropagation()、preventDefault() 接口，而且这些接口夸浏览器兼容。 如果出于某些原因想使用浏览器原生事件，可以使用 SyntheticEvent的nativeEvent 属性获取。 本节可参考极客学院 总结从用户输入到更新用户界面，处理步骤非常简单：
第6章 组件的复合传统HTML当中，元素是构成页面的基础单元。在React中，React组件是构成页面的基础单元。 本质上，一个组件就是一个JavaScript函数，它接受属性（props）和状态（state）作为参数，并输出渲染好的HTML。组件一般被用来呈现和表达应用的某部分数据，因此你可以把react组件理解为HTML元素的扩展。 扩展HTMLReact加jsx是强大而富有表现力的工具，允许我们使用类似HTML的语法创建自定义元素。比起单纯的HTML，它们还能够控制生命周期中的行为。 React偏爱符合，即通过结合小巧的、简单的组件和数据对象，构造大而复杂的组件。React组件使不可以扩展的，而是通过组件之间的组合来构建应用。 组件复合的例子组合模式的特征：选择题组件有一个单选框，单选框有一个输入框元素Input。 组装HTML对于每一个非必需的属性都需要一个默认值，可以把它添加到defaultProps中。 追踪状态组件需要记录随时间而变化的数据。 整合到父组件中将子组件放到父组件中 父组件、子组件关系子组件与其福组件通信的最简单方式就是使用属性（props）。父组件可以通过属性传入一个毁掉函数，子组件在需要时进行调用。 组件的复合知识React提供的用于定制和特殊化组件的方式之一。可通过本章的例子深入了解组件的复合。page44~52 第7章 mixinmixin允许我们定义可以在多个组件中公共用的方法。 什么是mixinmixin相当简单，他们就是混合进组件类中的对象而已。React在这方面实现得更加深入，它能防止静默函数覆盖，同时还支持多个mixin混合。 以component开头的生命周期函数，如componentDidMount，会按照在mixin数组中定义的顺序被调用，并最终调用组件中定义的componentDidMount，如果它存在的话。 关于mixin的其它用法可参考：
mixin是解决代码段重复的最强大工具之一，它同时还能让组件保持专注于自身的业务逻辑。mixin允许我们使用强大的抽象功能，甚至有些问题如果没有mixin就无法被优雅地解决。即使我们只打算在单个组件中使用一个mixin，它还是为我们提供了描述一个特定行为或角色并提供给该组件的能力。mixin减少了我们在了解整个组件之前需要阅读的代码量，同时允许我们在不污染组件本身的情况下做一些丑陋的处理（比如管理内部__interval）。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |