react构建指南
1，使用react需要用到脚手架 create react -app
使用之前需要装有node ，因为需要用到node的npm
安装的时候需要全局安装一个包，然后找个地方安装myapp
替换淘宝镜像 $ npm install cnpm -g --registry=https://registry.npm.taobao.org
以后使用cnpm会更快一些。
2，需要react router 路由管理
安装所必须要的包：
npm install --save-dev react-router
npm install --save-dev react-router-dom
1，props
1,props初始化的时候使用，state是交互的时候使用，仅用户交互，会随着事件改变
2，需要从父组件传递用props，随着时间推移不会改变用props
3,props不给初始值的话，会默认为true，但是不建议不给初始值
4，Text.defaultProps={//defaultProps可以给Text组件添加props
name:"hello"
}
5，传递props值，可以用<Greeting {...props}/>但是谨慎使用
组件类 ：
<Mytab name="abcd" age="aaa"/>,//是一个React组件类大写
component：
<span>{this.props.name},{this.props,age}</span>//在组件的时候获取的时候用
特点：1，属性不好改，定死的
2，props一般用来传递数据，父组件向子组件传递数据。
2，state
1,constructor(props){super（props)}//组件应该始终调用基础构造函数，一般来说是初始化组件的时候执行的。
2，在constructor里面可以直接this.state={};给state赋值
3，在其他方法里面不允许这么写。需要this.setState({...})
4，this.props和this.state是队列更新dom，所以有可能会有没排队跟上的情况，不应该用他的上一次值来做操作。解决 的办法是用setState（）来接受一个函数而不是上述对象，
this.setState((prevState, props)=>({
counter：prevState.counter+props.increment
}))
3，事件
1，react建议直接把监听事件写在dom中
2，on...事件监听只能作用于普通的html标签上，不能适用于组件上面
2，onClick={this.click}//绑定事件驼峰命名，写法如此
3，需要在construtor（）{ this.click=this.click.bind(this)}//进行事件绑定
然后lick(){this.setState({name:"000"})//才可以设置state的值}//不然设置不了state的值
4，如果嫌麻烦不愿bind，可以直接写成
click=()=>this.setState({name:"000"})//绑定事件第二种方法，就不用bind绑定了，是ES6写法
或者onClick={()=>this.click()}; 然后click(){this.setState({name:"000"})}//这样也不用绑定bind了
4，组件
1，如果一个新组件 retrun null或者retrun false，则这个新组件讲不会显示，但是会执行生命周期方法。
2， {a&&<span>aa</span>}，如果a有值或者是true，则显示aa组件，否则不显示
3，false，null，undefined，值为这些的条件都不渲染。
4，不受控组件的解决方案：
<input type="checkbox">和<input type="radio">支持defaultChecked，//不能直接使用checked因为使用了就不可变了
<select>与<textarea>和<input/>支持defaultValue。//不能直接使用value因为使用了就不可变了
5，forceUpdate就是手动重新render。有些变量不在state上，但是你又想达到这个变量
更新的时候，刷新render；
或者state里的某个变量层次太深，更新的时候没有自动触发render。
这些时候都可以手动调用forceUpdate自动触发render。所以建议使用immutable来操
作state，redux等flux架构来管理state。
6，如果shouldComponentUpdate返回false，则render()不会被调用，就不更新状态。
5,组件之间的通信
1,父组件可以通过props的方式向子组件传值
2，父组件可以通过{...this.props}的方式传入更深层子孙组件如：
// 通过 ... 运算符 向 Child_1_1 传递 Parent 组件的信息
class Child_1 extends Component{
render() {
return <div>
<p>{this.props.msg}</p>
<Child_1_1 {...this.props}/>
</div>
}
}
class Child_1_1 extends Component{
render() {
return <p>{this.props.msg}</p>
}
}
3，子向父组件通信
//可以利用回调函数
class Parent extends Component{ //父组件
state = {// es7语法
msg: ''
};
val=(data)=> this.setState(mag:data); //父组件的props中val方法
render() {
return <div>
<p>child msg: {this.state.msg}</p>
<Child value = {this.val} />//父组件的props
</div>;
}
}
class Child extends Component{//子组件
click(){
this.props.valuel('可以可以是随便的值，也可是是此子组件的state')
}
render(){
return <div><button onClick={this.click} >点击通信</button></div>
}
}
3，兄弟之间的通信 就是借助父组件做为中间桥梁，进行通信的。
4，兄弟之间的这种通信模式会触发很多次生命周期，故需要一种观察者模式import eventProxy from '../eventProxy。还有更好的解决方式，redux，后续跟进。
5,列表和秘钥
1,可以使用map（）来渲染li列表
function NumberList(props) {
let number=props.numbers;
let numlist=number.map((n)=> <Listi key={n.toString()} value={n}/>);//一定要加key区别与其他列表。
return <ul>{numlist}</ul>
}
function Listi(props){
return <li>{props.value+1}</li> //key不应写在这里，应写在根元素，可以在这里做数据操作+1
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
6，froms表单
1,普通的表单提交如果用在react上，实现这一点的标准方法就是一种称为受控组件的技术
2,textarea,select,input checkbox同样受用.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
7，propsTypes
1,PropTypes导出一系列验证器，可用于确保您接收的数据有效
2,PropsTypeys提供了不同的验证器
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
8，ref和js中的DOM操作
1，react封装了很多个.on事件，几乎不需要和dom直接打交道，react其实也建议过多的使用ref
1,ref就相当于一个DOM挂钩，在某个元素上设置ref，就可以取得这个DOM元素进行操作。
onclick(){ //点击获取ref设置的this.in的挂钩，进行DOM操作
this.in.focus();
}
render(){
return (
<div>
测试： <input ref={(input)=>{this.in=input;}} type="text" />//设置ref，this.in就是此input
<button onClick={this.onclick}>点击获取input焦点</button>
</div>
)
}
**4，注意{{}}**
<span tyle={{display:none}}}> 我是span1</span>//style要放到{{}}里面
容器组件
1,只放容器的组件，注意有结束标签
<BlackBorderContainer>
<div className='name'>My Name：Lucy</div>
<p className='age'>
My Age：<span>12</span>
</p>
</BlackBorderContainer>
class BlackBorderContainer extends Component{
render(){
return (<div>
{this.props.children[1]}<hr/>{this.props.children[0]}
</div>)
}
}
组件的生命周期
-> constructor() //初始化一些状态
-> componentWillMount() // 加载ajax
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()//清除一些状态机
// 从页面中删除
componentWillMount（），创建之前
componentDidMount（），创建之后
组件输出已经呈现给DOM后，
componentWillReceiveProps（）//组件的参数更新时，就是组件接受一个新的任务
componentWillUpdate（），更新之前
componentDidMount（），更新之后
componentWillUnmount() 组件对应的 DOM 元素从页面中删除之前调用
5，组件里面可以有子组件
6，创建列表 Mocha 调试用的 react全家桶系列之一
里面的有一个key 值，用来识别dom的唯一性，react发现如何存在就不重新创建，如果无就新建
下午创建一个列表
7，组件内的节点
node 标签
怎么操作需要渲染的标签
ref 类似于id
ref=“f1”
取 this.refs["f1]
8，在constructor中其实组件并没有完全准备好，因为组件还没有彻底渲染出来。所以使用refs的时候，一定要注意。
9，默认值，可以用default Value Checked 这样是可以改的
10，事件冒泡：
Origin
1、React并不会通过String类型的Html片段生成DOM
2、在componentWillReceiveProps中调用setState()不会触发re-render
3、componentWillUpdate中不能调用this.setState()
4、在通过Ajax获取到数据，调用this.setState()之前，应该通过this.isMounted()确定当前的component已经处在渲染完成的阶段
5、父组件到子组件通过props传递数据，子组件向父组件传递数据通过global event方式来处理，即在root element上接受所有子组件的事件处理
6、移动设备的touch事件需手动开启：React.initializeTouchEvents(true)
7、setState(data, callback)中的callback是在re-render完成之后调用的
61，简答的输出
> ```class Mytab1 extends React.Component{
render(){
return(<div>
<span> 我是span1</span>
<span> 我是span2</span>
<span>我是span3</span></div>
)
}
}
class Mytab extends React.Component{
render(){
return (<div><ul className="tab">
<li>home</li>
<li>about us1</li>
<li>about us2</li>
<li>about us3</li>
<li>about us4</li>
</ul>
<Mytab1/>//组件类
</div>);
}
}
ReactDOM.render(
<Mytab/>,//是一个React组件类
document.getElementById('example')
);
网友评论