突然发现，我好像有一两个星期没有更新学习资料了
整理下这段时间学习的react的学习笔记
---------------------------------------- var React = require('react'); var ReactDOM = require('react-dom'); 上下效果等同，两种写法 // import React from 'react'; // import ReactDOM from 'react-dom'; ---------------------------------------- 每个render函数里返回的html节点只能是一个，但可以用div将多个节点包含起来，如下： <div> <ComponentHeader/> <h2>zheshidierge</h2> </div> ----------------------------------------- 如果要将定义的组件供外部使用，必须在组件定义前添加 export default 如： export default class Componentheader extends React.Component{.........} ----------------------------------------- 定义组件开发模式的话，就需要给一个入口，这个入口在主要组件中配置： ReactDOM.render(<Index/>, document.getElementById('example')); “Index”为组件集合，“example”为页面中标记的id，即将来需要替换的部位 没有入口，react就不会发生作用 ----------------------------------------- 所有自定义的参数都必须使用{}，包括注释{/*......*/} 如下： render(){ var name = '111'; var boolean = false; return( <div> <h2>这里是这要内容</h2> <p>{name=='12' ? 'no---name' :'yes---name:'+name}</p> <p><input type='button' value={name} disabled={boolean} /></p> </div> ----------------------------------------- react生命周期中的各种函数名称必须严格区分大小写，否则无法生效， componentWillMount，componentDidMount等函数的定义类似与切面函数，如下： componentWillMount(){ 在组件加载前执行一下方法或者业务逻辑 console.log('Componentbody - componentWillMount'); } componentDidMount(){ 在组件加载完成执行一下方法或者业务逻辑 console.log("Componentbody - componentDidmount"); } render(){ var name = '111'; var boolean = ---------------------------------------- export default class ComponentBody extends React.Component{.....}，解释如下： 这里小组件的模式，export default代表可以提供给外部使用， class ComponentBody 定义组件名称钱必须添加class， extends React.Component 语法如此而已。 ---------------------------------------- setTimeout( ()=>{ this.setState({username:'kai'}); },4000 ); setTimeout，this.setState，类似与java里面的get/set方法， this.setState是修改属性。 类似与这种属性方面的函数，必须注意大写，否则没有作用。 ---------------------------------------- constructor(){ super(); this.state = {username:'yang',age:30}; } 这个构造函数中，“this.state”为其定义函数属性， {username:'yang',age:30,...}，类似与json方法，可以定义多个属性 ---------------------------------------- state属性特点： 当我们修改某个组件时，页面是从新刷新、从新请求， 而当我们只改变state里的属性时，页面类似与ajax请求， 只刷新某个部位， 即：state的作用域只属于当前类，不污染其他模块。 ---------------------------------------- 这里父组件向子组件传递参数 <ComponentBody username={'ying'} userid={117} age={11}/> {this.props.userid}{this.props.username}{this.props.age} state是组件自有属性，props是外来属性， 当需要外来传入属性时，直接在组件中username={'ying'} userid={117} age={11}直接写即可， 在模块中接收需要{this.props.age}即可，如下： <div> <h4> 这里是主要内容 </h4> <p>{this.state.username}==={this.props.userid}</p> </div> {this.state.username}接收自有属性， {this.props.userid}接收外来属性。 ----------------------------------------- import React from 'react';正确 import React from 'React';错误 这里一定要使用小写，因为会与别的文件重名，造成如下问题： WARNING in ./~/.npminstall/rxjs/5.0.0-beta.6/rxjs/Notification.js There is another module with an equal name when case is ignored. This can lead to unexpected be...... ----------------------------------------- 子组件传值，父组件随即改变属性值 1.子组件中，定义改变的属性位置 return( <div> <p>请输入：<input type="test" onChange={this.props.handleChildV} /></p> </div> ) handleChildV为定义时自定义的名称 2.父组件中 在return中定义 <BodyChild handleChildV = {this.handleChildV.bind(this)}/> BodyChild为组件名称 将子组件中的值与父组件关联 3. 并在父组件中定义相关方法使子组件传来的值与属性值相关联 handleChildV(event) { this.setState({ age: event.target.value 将传来的值与属性值关联 }); ------------------------------------------ 验证父组件传给子组件的值的方法： 在组件中 import PropTypes from 'prop-types'; 然后在最后定义 ComponentBody.propTypes = { userid: PropTypes.number.isRequired }; 注意：这里是React v15.5.0版本类型验证方法 ComponentBody为验证时的组件名称 这样就是说父组件必须为子组件传值，并且为number类型 这里需要注意的是，没有传值时，程序只是警告，传的类型不对时，程序会报错 ------------------------------------------ 父组件未传值，然后需要有个默认值的甚至方法 在最开始定义 const defaultProps = { username : "这是默认值" }; 这里json格式，可定义多个属性值 在最后定义 ComponentBody.defaultProps = defaultProps; ComponentBody为默认值设置的组件名称 ------------------------------------------ <BodyChild {...this.props} id={34} handleChildV = {this.handleChildV.bind(this)}/> 页面传参时，这里为父往子传时， 只需要定义{...this.props} 就可以将参数继续往‘下’传， 如果还有自定义的参数 id={34}在后面继续定义即可 ------------------------------------------
