1. state
标准写法
class MyComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
isHot: false,
wind: '微风',
};
this.changeWeather = this.changeWeather.bind(this);
}
render() {
const { isHot, wind } = this.state;
/*
* 绑定事件得用小驼峰；
* 事件得写到{}中；
* 事件不能初次被调用，因为调用会把返回值给点击事件；
* */
return (<h1 onClick={this.changeWeather}>今天天气很{ isHot ? '炎热': '凉爽'}, {wind}</h1>)
}
changeWeather() {
/*
* this为undefined, 因为每个自定义方法内部开启了严格模式，this为undefined。
* 可以通过绑定bind或者箭头函数直接赋值来决定。
* */
console.log(this);
const { isHot } = this.state;
/*
* state必须通过内置api setState来修改，直接修改虽然打印数据变了，但是devtool和页面不变
* setState是合并，而不是覆盖
* */
this.setState({
isHot: !isHot,
})
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('app'));
注意点
- 初始化状态：
（1）默认值为null，在constructor中用对象形式定义；
（2）之前必须调用super（）； - render函数的JSX中绑定事件：
（1）只能用小驼峰eg:onClick；
（2）事件得写到{}中；
（3）事件不能被初始调用，因为这样会把返回值给绑定上； - 自定义事件的this指向：
（1）把事件直接定义在类中，实例可以通过原型链调用。但是触发事件是直接调用，自定义的方法开启了局部严格模式，this为undefined。可以通过在constructor里使用bind绑定this，使自定义事件触发时可以访问到this。 - setState
（1）state必须通过内置api setState来修改，直接修改虽然打印数据变了，但是devtool和页面不变；
（2）setState是合并，而不是覆盖；
（3） changeWeather 方法中，调用完 this.setState后，直接打印this.state.isHot,值并没有改变。因为调用完，react会异步修改该值。可以在this.setState的第二个参数（回调函数）中打印该值，该回调函数会在状态更新完毕、界面也更新后调用。
（4） this.setState中的第一个参数，可以是对象形式，值为改变的state；也可以是回调函数，参数为state和props。如果更新的state依赖于原state，可以使用函数形式;
（5）setState的参数必须是新的对象，不能和this.state对象或其属性共用地址值，会导致不更新。
原生事件绑定
<h1 id="title">hello，react</h1>
<h1 onclick="click3()">hello，react3</h1>
const dom = document.getElementById('title');
dom.addEventListener("click", () => {
console.log('click1');
})
dom.onclick = () => {
console.log('click2');
}
function click() {
console.log('click3');
}
简写形式
标准写法由于所有的事件都需要手动绑定this，会比较麻烦，所以利用类里面直接赋值语句+箭头函数this指向的特性实现简化。
class MyComponent extends React.Component{
// 无声明的赋值语句可以给实例加上属性或方法
state = { // 初始化状态。
isHot: false,
wind: '微风',
};
render() {
const { isHot, wind } = this.state;
return (<h1 onClick={this.changeWeather}>今天天气很{ isHot ? '炎热': '凉爽'}, {wind}</h1>)
}
changeWeather = () => {
const { isHot } = this.state;
this.setState({
isHot: !isHot,
})
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('app'));
类中的属性和方法
直接在构造器中声明赋值的属性，会复制一份到实例中；
在类中直接定义的方法，在类的原型上，实例可以通过原型链查找；
直接在类中赋值但没声明的属性，会直接成为实例的属性。只适合固定不传参的属性；
在类中用箭头函数定义的方法，会成为实例的方法；
在无声明的属性或方法前加static关键字，会作为类的属性或方法，通过类直接访问；
在无声明的属性前加readonly关键字，代表只读属性。
2. props
函数组件
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// 函数组件
function Person(props) {
const {name, age, sex} = props;
return (<ul>
<li>我叫{name}</li>
<li>我今年{age}岁</li>
<li>我是{sex}生</li>
</ul>)
}
// 限制参数类型、必填
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
}
// 限制参数默认值
Person.defaultProps = {
sex: '女',
age: 10,
}
const person = {name: '旺仔', age: 6, sex: '男'}
// 单个传递属性，数字形式的要放在{}中
ReactDOM.render(<Person name="QQ" age={18} />, document.getElementById('test'));
// 打包传递属性，在{}中使用...运算符，可以被babel+react解析
ReactDOM.render(<Person {...person}/>, document.getElementById('test1'));
</script>
注意点
- 函数组件只能用三大属性中的props；
- 参数会打包成一个对象作为props传入；
- 引入prop-types，对props属性进行限制；
- 只能在外部添加静态属性；
类式组件
// 类式组件
class Person extends React.Component{
constructor(props) {
super(props);
// 构造器中，如果不接收props且不传入super，会导致里面访问不到this.props，为undefined。不过这种使用场景很少。
console.log(this.props);
}
render() {
const {name, age, sex} = this.props;
return (<ul>
<li>我叫{name}</li>
<li>我今年{age}岁</li>
<li>我是{sex}生</li>
</ul>)
}
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
}
static defaultProps = {
sex: '女',
age: 10,
}
}
const person = {name: '旺仔', age: 6, sex: '男'}
// 单个传递属性，数字形式的要放在{}中
ReactDOM.render(<Person name="QQ" age={18} />, document.getElementById('test'));
/*打包传递属性，在{}中使用...运算符，可以被babel+react解析*/
ReactDOM.render(<Person {...person}/>, document.getElementById('test1'));
注意点
- 可以用打包成对象或者单个传输的方式传递属性，接收都是通过props对象；
- 利用static静态属性和prop-type库来在组件内部对props参数进行限制；
- 构造器中，如果不接受props且不传入super，会导致构造器里访问不到this.props,为undefined。不过这种情况不常遇到，因为初始化可以在外部直接赋值，不用super也可以直接访问参数。
展开运算符
let arr1 = [1,3,5,6];
let arr2 = ['a','b','f'];
// 1. 展开数组
console.log(...arr1); // 1 3 5 6
// 2. 连接两个数组(不是合并)
console.log([...arr1, ...arr2]); // [1, 3, 5, 6, 'a', 'b', 'f']
// 3. 在函数形参中使用，把分开传递的参数合并成一个数组
function sum (...arr) {
console.log(arr); // [1, 3, 5]
return arr.reduce((pre, cur) => {
return pre + cur;
})
}
console.log(sum(1, 3, 5)); // 9
let obj = {name: 'QQ', age: 5, parents: ['mom', 'dad']};
// 4. 不能直接展开对象
console.log(...obj); // TypeError: Found non-callable @@iterator
// 5. ...配合{}可以展开对象，实现对象的浅拷贝，引用类型一改则都改，值类型单独修改；
const p = {...obj}; // {name: 'QQ', age: 5}
p.parents[0] = 'mother';
p.name = '旺仔';
console.log(obj); // {"name": "QQ","age": 5,"parents": ["mother","dad"]}
console.log(p); // {"name": "旺仔","age": 5,"parents": ["mother","dad"]}
// 6.合并对象
const p1 = {...obj, name: 'p', sex: 'male'};
console.log(p1); // {name: 'p', age: 5, parents: Array(2), sex: 'male'}
3. refs
class MyComponent extends React.Component{
showData1 = () => {
const {input1} = this.refs;
alert(input1.value);
}
showData2 =() => {
const {input2} = this.refs;
alert(input2.value);
}
showData3 = () => {
alert(this.input3.value);
}
bindInput4 = (dom) => {
this.input4 = dom
}
showData4 = () => {
alert(this.input4.value);
}
input5 = React.createRef()
showData5 = () => {
alert(this.input5.current.value);
}
render() {
return (
<div>
{/* 字符串形式的ref */}
<input ref="input1" type="text" />
<button onClick={this.showData1}>点我提示左侧数据</button>
<input ref="input2"
onBlur={this.showData2}
type="text"
placeholder="失去焦点提示数据"
/>
{/* 回调函数绑定ref */}
<input ref= {dom => this.input3 = dom}
onBlur={this.showData3}
placeholder="回调函数绑定ref"
type="text"/>
<input ref= {this.bindInput4}
onBlur={this.showData4}
placeholder="回调函数绑定ref"
type="text"/>
{/* createRef绑定ref */}
<input ref= {this.input5}
onBlur={this.showData5}
placeholder="createRef绑定ref"
type="text"/>
</div>
)
}
}
绑定ref的三种方式：
- 通过字符串绑定，所有绑定的ref都会收入this上的refs对象中方便读取，最简单，但是这种方法要被废弃；
- 通过回调函数绑定，参数为当前dom，赋值给this中的变量，this中的变量不需要提前声明，可以直接使用；
- 通过React自带的createRef方法+赋值语句创建ref绑定的变量，可以通过变量的current属性读取到dom；
react建议不要过度使用ref，会影响效率。
可以通过event.target得到发生事件的Dom对象。
